Javascript 如何在文本中移动过渡后使文本可见

我有一些简单的过渡动画，我想让文本（A href）不可见，所以我使用了“display:none”，我想在图像通过后使用javascript中的“onclick”东西在图像上显示“display:block”。这是我的JSFIDLE：

\facebook\u文本a{
位置：绝对位置；
字体大小：15px；
颜色：#000；
文字装饰：无；
左边距：50像素；
利润上限：-10px；
z指数：1；
显示：无；
}
#facebook_image.fly{
位置：绝对位置；
左边距：125px；
边际上限：0px；
过渡：所有5s都放松下来；
}
#facebook_图片img{
位置：绝对位置；
z指数：10；
高度：35px；
宽度：35px；
利润上限：-15px；
}
document.querySelector（'.image_animation'）.onmouseover=function（）{
var d=document.getElementById（“facebook_图像”）；
d、 className=d.className+“fly”；
}

facebook\u图片当事件结束时，您应该捕捉到事件，您可以这样做：

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

---

文本何时可见？将类作为

body

添加到某个父元素中，然后使用CSS控制两种转换（文本和图像）。对于文本使用

转换延迟

.Markai-图像移动通过后，它应该变得可见，带有动画“onclick”Skobaljic-你能给我一些更好的建议吗？在

中，我不能很好地包装这两个元素，而不是在mouseover中添加类：

var d=document.getElementById（“我的动画”）；d、 className=d.className+“fly”。在CSS中，为文本定义动画与为图像定义动画一样，只需添加延迟。您的CSS选择器将更改为：
.fly#facebook_image{}
和
.fly#facebook_text{}
他知道转换需要多长时间才能结束，不需要这个。他可以在他的
onmouseover
event.skobaljic中设置超时-也许我可以，你能帮我做一点代码吗？我是JS新手，所以Ya提供的一些帮助会非常好。我想你可以自己做，从添加
setTimeout（function（）{/*Show text..*/}，3000）
到你的
onmouseover
事件开始。但是我会用CSS来做这件事，就像你对图像做的那样。
 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";
}