CSS3 动画完成时是否有回调？

Question

有没有办法在css3动画的情况下实现回调函数？如果是 Javascript 动画，它是可能的，但在 css3 中找不到任何方法。

我可以看到的一种方法是在动画持续时间之后执行回调，但这并不能确保它总是在动画结束后立即被调用。这将取决于浏览器 UI 队列。我想要一个更强大的方法。有什么线索吗？

Answer 1

如果您使用 Javascript 而不是 CSS 创建动画，那么您需要使用动画 API 来设置动画的 onfinish event 的回调。

animation = myAnimatedElement.animate([
    {transform: 'translateX(0px)'},
    {transform: 'translateX(-100px)'},
], 700);

animation.onfinish = (e) => {
    // Do something after the animation finishes
};

请记住，如果动画被取消、移除或暂停，则不会触发 onfinish 事件。您可能还想为这些事件添加侦听器，具体取决于您的需要。

Answer 2

您可以通过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"); });
});

JS Fiddle Demo

Answer 3

是的，有。回调是一个事件，因此您必须添加一个事件侦听器来捕获它。这是一个使用 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/