javascript - "animationend"有时不触发

Question

我有一个 CSS 动画，它应用到带有 CSS 类的 HTML 元素。我还有一个附加到 animationend 的事件监听器(这是一个现代 Windows 应用程序，因此浏览器仅为 IE11)。我看到的是，有时事件被触发，有时却没有。无论事件触发如何，我总能在视觉上看到它的动画效果。对我来说，这看起来像是某种竞争条件。

我在网络上进行了搜索，试图了解是什么原因导致此事件没有被触发，但我没有找到任何令人满意的结果。我在 MDN 上找到了以下内容:

Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.

更新 1:transitionend 与 animationend 无关，因此此信息无关。

我不确定这是否适用于 CSS 动画。有没有人知道是什么原因造成的？如果有任何事件可以检测到动画已中止，那也可能是一种有用的解决方法。

UPDATE2:我当前使用的解决方法:

element.addEventListener("animationstart", function () {
    setTimeout(function () {
        // do stuff
    }, animationDuration);
});

Answer 1

有没有可能你的动画没有结束？

查看animationcancel 事件的文档:
https://developer.mozilla.org/en-US/docs/Web/Events/animationcancel

但是，浏览器支持似乎参差不齐(HTMLElement.prototype 中的“onanimationcancel” 在 Chrome 67 中为我返回 false)。

目前看来使用setTimeout hack 可能是必要的。