你如何检测 CSS 动画何时以 JavaScript 开始和结束?

Posted

技术标签:

【中文标题】你如何检测 CSS 动画何时以 JavaScript 开始和结束?【英文标题】:How do you detect when CSS animations start and end with JavaScript? 【发布时间】:2013-01-25 15:46:21 【问题描述】:

我习惯于使用 javascript 为元素制作动画。我发现使用 CSS3 更简单。

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

【问题讨论】:

@BenjaminGruenbaum 过渡!== 动画 是的,另一个问题是关于过渡的,答案是事件:transitionend,但这个问题是关于动画结束 【参考方案1】:

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

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

【讨论】:

以上是关于你如何检测 CSS 动画何时以 JavaScript 开始和结束?的主要内容,如果未能解决你的问题,请参考以下文章

JSFL:检测元素何时被翻转

如何检测新对象何时被生成或从统一中删除以获得评分/分数?

检测 iframe 何时开始加载新 URL

角度 2 动画与 css 动画 - 何时使用啥?

检测用户何时中断 UIScrollView 动画

如何检测 SwiftUI 视图何时被拖过