首页 > 开发 > CSS > 正文

有没有办法捕获css3动画完成的回调通知

2017-09-12 09:40:14  来源: 网友分享

javascript做的动画效果,在完成后可以获得一个回调通知(callback)
那么,越来越多的css3动画效果,有没有办法获得类似这种的通知呢?

解决方案

1.transition
可以了解 transitionend 事件。
W3C CSS Transitions Draft:http://www.w3.org/TR/css3-transitions...

The ‘transitionend’ event occurs at the completion of the transition. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire.

Bubbles: Yes
Cancelable: Yes
Context Info: propertyName, elapsedTime

demo在此。http://jsfiddle.net/QBFtH/1/

2.animation动画
可以了解 animationend 事件。
W3C CSS Animation Events:http://www.w3.org/TR/css3-animations/...

http://developer.apple.com/library/sa...

The ‘animationend’ event occurs when the animation finishes.

Bubbles: Yes
Cancelable: No
Context Info: animationName, elapsedTime

demo:http://jsbin.com/oveval/10