"animationend“有时不会触发。
我有一个CSS动画，它应用于一个带有CSS类的HTML元素。我还在animationend上附加了一个事件侦听器(它是一个现代的Windows应用程序，所以浏览器只支持IE11 )。我所看到的是，事件有时会被触发，有时不会，不管事件触发与否，我总是能看到它在视觉上的动画效果。对我来说，这看起来像是某种种族状况。
我在网上搜索过，试图了解是什么原因导致这一事件不会被解雇，但我没有找到任何令人满意的结果。我在MDN上找到了以下内容
注意:如果由于动画属性的值在转换完成之前更改了动画属性的值而中止转换，则不会触发transition _ The事件。
UPDATE1: transitionend与animationend没有任何关系，因此此信息是无关的。
我不确定这是否同样适用于CSS动画。有没有人知道是什么导致了这种情况？如果有任何事件可以检测到动画被中止，这也可能是一种有用的解决方法。
UPDATE2:我正在使用的当前解决方法：
element.addEventListener("animationstart", function () {
setTimeout(function () {
// do stuff
}, animationDuration);
});回答 4
Stack Overflow用户
发布于 2018-06-26 09:11:19
有没有可能你的动画没有结束？
查看animationcancel事件的文档：
https://developer.mozilla.org/en-US/docs/Web/Events/animationcancel
然而，它看起来浏览器支持可能是参差不齐的(在Chrome67中，"onanimationcancel" in HTMLElement.prototype为我返回false )。
目前看来，使用setTimeout黑客可能是必要的。
Stack Overflow用户
发布于 2019-02-26 01:01:19
您可以使用此函数
function onAnimationEnd(element, handler) {
//- Create local variables
var events = 'animationend transitionend webkitAnimationEnd oanimationend MSAnimationEnd webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd';
//- Bind event to element
$(element).on(events, handler)
//- Return received element
return element
}此函数用于在animation或transition都结束时绑定事件。
还要确保动画元素在动画运行时没有被删除或移动。
Stack Overflow用户
发布于 2019-11-06 01:17:00
使用IE11，您不能假定JS事件绑定将在CSS动画开始或结束之前发生。这种类型的问题是间歇性的，频率/发作将取决于某些因素。
如果CSS动画持续时间较低，并且动画在样式表准备就绪后立即开始，则可能无法及时应用JS事件绑定
我发现的一个可靠的解决方法是使用JS通过className调用CSS动画。即，仅当className已通过JS应用时才应用CSS动画名称属性。
https://stackoverflow.com/questions/29855929
复制相似问题
腾讯云开发者
