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

Question

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

Answer 1

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

Answer 2

如果你是在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/

Answer 3

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

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