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

Posted 2023-02-22

【中文标题】CSS3 动画完成时是不是有回调？

【英文标题】：Is there a callback on completion of a CSS3 animation?CSS3 动画完成时是否有回调？

【发布时间】：2011-09-05 09:35:23

【问题描述】：

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

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

【问题讨论】：

Callback on CSS transition 的可能重复项

如果你想做简单的 CSS 动作，比如在元素过渡后隐藏元素，也许你不需要回调，你可以用动画的关键帧来解决你的问题。跨度>

@givanse 这个问题是关于 CSS 过渡，而不是 CSS 动画。

【参考方案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 事件。您可能还想为这些事件添加侦听器，具体取决于您的需要。

【参考方案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

【讨论】：

加分项是它与 jQuery animate 共享 API 规范，但仍利用 CSS 动画的硬件渲染平滑度。我们只是用这个替换了几乎所有地方的 jQuery animate。

【参考方案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/

【讨论】：

对于 IE10，它是“MSAnimationEnd”（参见 msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations）

这是transitionend，而不是animationend。

@MichaelJones 不，这是针对 css3 过渡的。问题是关于动画的。

@MartinWittemann IE10 final 现在使用animationend msdn.microsoft.com/en-us/library/ie/…。 @Husky 该代码在 Chrome 和 FF 14 中确实有效，请参阅更新的小提琴 jsfiddle.net/W3y7h

复制***.com/questions/9255279/… 有更完整的解决方案