Question

我试图找到一种更好的方法来延迟myFunction。正如你看到我动画这个图像淡入而当我点击它我触发一个新的动画，如slideleft和在这个动画的结尾我调用myFunctionContinued延迟大约5秒，直到我的动画完成并且链接打开。我不认为这是一个聪明的方法，我希望你的建议！

所有代码都在jsfidle

HTML只是一个带有id和类fadein的div

<div id="object4" class="fadeIn">
 <a id="myLink" href="#" onclick="myFunction();return false;"><img class="img4" src="http://imageshack.com/a/img89/1871/deqz.png"></a></div>

CSS和关键帧fadein和slideleft

<style> 

body{

background-color:black;

width:800px;
}

img.img4{
width: 300px; height: 200px;
transform:translate(550px,150px);

}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;       
    }
    60% {
        transform: scale(1.1);  
    }
    80% {
        transform: scale(0.9);
        opacity: 1; 
    }   
    100% {
        transform: scale(1);
        opacity: 1; 
    }       
}



/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-fill-mode: forwards;
    animation-duration: 4s; 
    -webkit-animation-duration: 4s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(40%);
    }
    90% {
        transform: translateX(-3%);
    }

    100% {
        transform: rotate(-130deg) translate(-430px,60px);
    }
    /*from {transform: translateX(40%);}
    to {transform: translateX(-3%);}*/
}

</style>

单击object4触发器动画slideleft 等待5秒，呼叫继续功能并在同一窗口中打开链接

<script>

function myFunction()
{
$('#object4').click(function() {
        $(this).addClass("slideLeft");


    });

setTimeout(myFunctionContinued, 5000);

}

function myFunctionContinued(){

window.open("http://www.w3schools.com",'_self',false);}

</script>

关键帧样式照片不是我想要关注的动画的最终结果，就像我说的那样延迟。

谢谢你的时间！

Answer 1

当CSS3动画完成时会触发一个事件（来自：http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

object4.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
function(e) {

// code to execute after transition ends

}）;

更好的方法来延迟javascript中的函数？

1 个答案: