标签: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)
标签:cti 相对 监听 end nbsp set 动画效果 用户 eth
原文地址:https://www.cnblogs.com/mafengzi/p/10468471.html