"animationend"有时不起火

Question

我有一个CSS动画,可以应用于带有CSS类的HTML元素.我还有一个事件监听器animationend(它是一个现代的Windows应用程序,所以浏览器只有IE11).我所看到的是,有时事件会被触发,有时则不会.无论事件发生如何,我总能看到它在视觉上动画.对我来说,这看起来像某种竞争条件.

我在网上试图了解什么可能导致这个事件没有被解雇但我没有找到任何令人满意的结果.我在MDN上找到了以下内容:

注意:如果转换中止,则不会触发transitionend事件,因为动画属性的值在转换完成之前已更改.

UPDATE1: transitionend与animationend此无关,因此此信息无关.

我不确定它是否适用于CSS动画.有没有人对这会导致什么有任何想法？如果有任何事件可以检测到动画中止,这也可能是一个有用的解决方法.

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

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

Answer 1

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

然而，浏览器支持似乎不稳定（在 Chrome 67 中为我"onanimationcancel" in HTMLElement.prototype返回）。false

看来setTimeout暂时使用hack可能是必要的。