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

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

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


如果你是在pc上使用的,我建议你可以使用velocity.js,但如果你用在移动端,我建议还是用原生css动画,本人在移动端首次使用velocity.js,还是略卡,换回css的比较流畅了,再强调,在移动端,优先用css动画而非js动画.
velocity.js提供友好的回调Promises写法
请参考一下2个链接

http://julian.com/research/velocity/#uiPack
http://julian.com/research/velocity/#promises
网站:http://julian.com/research/velocity/

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


// Safari 3.1 到 6.0 代码
document.getElementById("myDIV").addEventListener("webkitTransitionEnd", myFunction);

// 标准语法
document.getElementById("myDIV").addEventListener("transitionend", myFunction);

【热门文章】
【热门文章】