是否有完成CSS3animation的callback？

有什么办法来实现一个callback函数的情况下css3animation？ 在Javascriptanimation的情况下，它可能但没有find任何方式来做到这一点在CSS 3。

我可以看到的一种方式是在animation持续时间后执行callback，但不能确保在animation结束后总是会调用callback。 这将取决于浏览器UI队列。 我想要一个更强大的方法。 任何线索？

Answer 1

就在这里。 callback是一个事件，所以你必须添加一个事件监听器来捕捉它。 这是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/

Answer 2

一个简单的方法，你做一个callback，也处理您的CSS3转换/浏览器兼容性将是jQuery的运输插件 。 例：

 //Pulsing, moving element $("#element").click( function () { $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); }); }); 

JS小提琴演示