时间:2021-07-01 10:21:17 帮助过:34人阅读
传递的javascript式动画,可以很容易地通过回调函数来实现动画完成后做什么,而css3动画则不好通过javascript来回调。如何解决这个问题呢?
css动画我 以前在文章中提到过。这里写几个基本用法,第一种是简单的变换,使用transform即可:
.mydiv { width:100px; height:100px; background:red; -webkit-transition: all 2s;}.newClass { -webkit-transform: translateY(100px)}
第二种是复杂一点,需要自己定义帧的状态:
@-webkit-keyframes mymove { from {top:0px;} to {top:200px;}}.mydiv { width:100px; height:100px; background:red; position:relative; -webkit-animation:mymove 2s forwards; /* Safari and Chrome */}
回到一开始提出的问题,我们如何回调。
一种最基本的想法就是我们知道了动画的时间,那么可以通过延时来模拟回调:
//css中代码可以看到动画持续2svar delay = 2000;setTimeout(function(){ dosomething()}, delay);
但是只要深入理解一点就知道setTimeout并不可靠,而且这么写可拓展性也太差了。
那么解决办法就是通过新的事件transitionEnd和animationend:
document.getElementById('my').addEventListener('transitionEnd', function(){ alert('Transform animation has done!');});document.getElementById('my').addEventListener('animationend', function(){ alert('Animation has done!....');});
这样就简单了。当然 还有animationstart,animationiteration等事件,这里就不一一介绍了。