在完成CSS3动画时是否有回调？ [英] Is there a callback on completion of a CSS3 animation?

问题描述

有没有什么方法来实现回调函数在css3动画的情况下？在JavaScript动画的情况下，它可能，但没有找到任何方式在css3。

Is there any way to implement a callback function in case of css3 animation? In case of Javascript animation its possible but not finding any way to do it in css3.

我可以看到的一种方法是在动画持续时间后执行回调， t确保它总是在动画结束后立即调用。它将取决于浏览器的UI队列。我想要一个更健壮的方法。任何线索？

One way I could see is to execute callback after the animation duration but that doesn't make sure that it will always be called right after the animation ends. It will depend on the browser UI queue. I want a more robust method. Any clue?

推荐答案

是的，有。回调是一个事件，因此您必须添加一个事件侦听器来捕获它。这是一个使用jQuery的例子：

Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

或纯js：

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

现场演示：
http://jsfiddle.net/W3y7h/

这篇关于在完成CSS3动画时是否有回调？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！