Animationend 事件未在 :after 元素上触发答案

【问题标题】：Animationend event not firing on :after elementAnimationend 事件未在 :after 元素上触发
【发布时间】：2019-08-11 00:52:22
【问题描述】：

我在 :after 元素上设置了动画，并在 animationend 事件上设置了事件处理程序。但是，在 IE10/IE11 中，animationend 事件永远不会触发。

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        document.writeln('Animation has ended');
    });
});

JSFiddle：http://jsfiddle.net/Robin_f/R3qEG/

真诚地希望有人可以帮助我。

【问题讨论】：

标签： javascript jquery css events animation

【解决方案1】：

在网上搜索后，很明显 IE 还不支持绑定到伪元素上的动画事件。我在原始帖子中发布的 jsFiddle 使这一点更加明显，它不会在动画结束时触发事件。

【讨论】：

【解决方案2】：

看起来像 IE 中的一个错误，或者可能是 DEV 团队设计的，不知道。一个解决方法，真的很hacky，可能是在元素上设置一个假动画来处理IE10/11：

#testid {
    animation: fakeAnim ease-in-out 1s 4 alternate;
}

@keyframes fakeAnim {    
    to {
        opacity: 1;
    }
}

注意： firefox 将触发事件两次，应为 Firefox 过滤它以使逻辑只触发一次。

可以使用：

var isIE = !! navigator.userAgent.match(/Trident\/7\./);
$(document).ready(function () {
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function (e) {
        if (!isIE && e.originalEvent.animationName === "fakeAnim") return;
        alert('Animation has ended');
    });
});

See DEMO jsFiddle

【讨论】：

【解决方案3】：

因为：

document.write 在 JSFiddle 环境中是不允许的，并且可能会中断你的小提琴。

您可以改用console.log() 进行调试：

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        console.log('Animation has ended');
    });
});

Updated Fiddle

或：

$(document).ready(function(){
    var testdiv = $('#testid');
    testdiv.on('animationend webkitAnimationEnd', function(){
        $('#testid').append('Animation has ended');
    });
});

Updated Fiddle

【讨论】：

Op 的问题是，如果绑定在 IE10/11 中的伪元素上，则不会触发事件
是的，document.write 工作得很好:)（尽管不推荐）