码迷,mamicode.com
首页 > Web开发 > 详细

css3动画,监控动画执行完毕

时间:2019-03-03 23:59:56      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:cti   相对   监听   end   nbsp   set   动画效果   用户   eth   

CSS3之前,在网页上要做动画,一般使用javascript来实现,用timer定时执行一些操作来实现动画效果。

自有了CSS3之后,在网页上做动画变得更简单了。相对于使用javascript的实现方式,用CSS3实现的动画效果更流畅,实现起来也更简单。当然,因为CSS几乎没有什么逻辑控制,所以一般只用来做一些简单的、与用户没有交互的动画。

CSS3中有两种实现动画的方式,一种是使用transition,另一种是使用animation。如果只是想要简单的过渡效果,则使用transition,如果是做稍微复杂一点的、在不同时间点执行不同动画效果的动画,则应使用animation

CSS3实现动画虽然简单,但如何监控动画的执行呢?比如,你可能希望在动画执行完毕之后执行某些操作。

第一种比较low的方式是可以设置一个与动画相同时长的timer。

假设动画时长是1s:

#mydiv{
    transition: 1s;
}

则可以在动画开始执行后,相隔相同时间后执行你要的操作:

setTimeout(function(){
    // do something
}, 1000);

这种方式虽然low,但一般情况下却是可行的。

但这种方式却是不够精确的。因为CSS3的动画在执行过程中并不是精确的时间,你设置了动画时长1s,但实际时长却可能会稍短或稍长。另外,timer的时间也是不精确的。

那么,如果你需要比较精确的在动画执行完毕之后执行某个操作,则应该监听transitionend事件。

mydiv.addEventListener(‘transitionend‘, function(){
    // do somthing
}, false)

 

css3动画,监控动画执行完毕

标签:cti   相对   监听   end   nbsp   set   动画效果   用户   eth   

原文地址:https://www.cnblogs.com/mafengzi/p/10468471.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!