Javascript CSS3 动画完成后是否有回调？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6186454/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a callback on completion of a CSS3 animation?
提问by alter
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.
有没有办法在css3动画的情况下实现回调函数？在 Javascript 动画的情况下，它可能但在 css3 中找不到任何方法。
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?
我可以看到的一种方法是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更健壮的方法。有什么线索吗？
回答by methodofaction
Yes, there is. The callback is an event, so you must add an event listener to catch it. This is an example with jQuery:
就在这里。回调是一个事件，因此您必须添加一个事件侦听器来捕获它。这是一个 jQuery 的例子：
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() {
alert("fin")
});
Or pure js:
或者纯js：
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);
Live demo: http://jsfiddle.net/W3y7h/
现场演示：http: //jsfiddle.net/W3y7h/
回答by ROFLwTIME
An easy way for you to do a callback that also handles your CSS3 transitions/browser compatibilities would be the jQuery Transit Plugin. Example:
jQuery Transit Plugin是一种简单的方法来处理你的 CSS3 转换/浏览器兼容性的回调。例子：
//Pulsing, moving element
$("#element").click( function () {
$('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});
