在文本中过渡后如何显示文本

Question

我有一些简单的过渡动画，我想使文本（A href）不可见，因此我使用了“ display：none”，并且在图像使用“ onclick”对象通过图像后，我想通过“ display：block”使它可见该图像上的javascript。 这是我的jsfiddle： http : //jsfiddle.net/ofy4t5a8/

#facebook_text a {
    position: absolute;
    font-size: 15px;
    color: #000;
    text-decoration: none;
    margin-left: 50px;
    margin-top: -10px;
    z-index: 1;
    display: none;
}
#facebook_image.fly {
    position: absolute;
    margin-left: 125px;
    margin-top: 0px;
    transition: all 5s ease-out;
}
#facebook_image img {
    position: absolute;
    z-index: 10;    
    height: 35px;
    width: 35px;
    margin-top: -15px;
}
                            <div id="facebook_text">
                                <a href="google.com" alt="facebook" target="_blank">Facebook</a>
                            </div>
                            <div id="facebook_image">
                                <img class="image_animation" src="facebook.jpg"></img>
                            </div>
                            <script>
                                document.querySelector('.image_animation').onmouseover=function()    {
                                var d = document.getElementById("facebook_image");
                                d.className = d.className + " fly";    
                                }
                            </script>

Answer 1

facebook_image您应该在事件结束时捕获事件，您可以这样操作：

 transitionEnd = (function transitionEndEventName() {
        var i,
            el = document.createElement('div'),
            transitions = {
                'transition':'transitionend',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            };

        for (i in transitions) {
            if (transitions.hasOwnProperty(i) && el.style[i] != undefined) {
                return transitions[i];
            }
        }
    })();
var a = document.querySelector('a');
var b = document.querySelector('.facebook_image');
b.addEventListener(transitionEnd, function(){
     a.style.display = "block";
}