javascript - 过渡移动文本后如何使文本可见

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";
}