你如何检测 CSS 动画何时以 JavaScript 开始和结束? [英] How do you detect when CSS animations start and end with JavaScript?

问题描述

我习惯于使用 JavaScript 为元素设置动画.我发现使用 CSS3 更简单.

I was used to animating elements with JavaScript. I found it simpler to do it with CSS3.

使用 JavaScript 如何检测 CSS 动画何时开始以及何时结束?有什么办法吗?

Using JavaScript how can you detect when a CSS animation has started and when it has ended? Is there any way at all?

推荐答案

将适当的事件绑定到元素，例如

Bind the appropriate events to the element, e.g.

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations#Using_animation_events

注意:您可能还需要添加适当的前缀事件，例如webkitAnimationEnd

Note: You may need to add the appropriate prefixed-events as well, e.g. webkitAnimationEnd

这篇关于你如何检测 CSS 动画何时以 JavaScript 开始和结束?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！