簡體   English   中英

在文本中過渡后如何顯示文本

[英]How to make text visible after transition moving through text

我有一些簡單的過渡動畫,我想使文本(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>

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM