Javascript Animationend事件未启动：在元素之后

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

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

JSFiddle：

真诚希望有人能帮我做这件事。

因为：

JSFiddle环境中不允许document.write，它可能会中断 你的小提琴

您可以使用

console.log（）

进行调试：

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

或：

---

看起来像是IE中的一个bug，或者可能是由开发团队设计的，我不知道。一个解决方法，真正的黑客，可能是在元素上设置一个假动画来处理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');
    });
});

---

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

Op的问题是，如果绑定在IE10/11Yes中的伪元素上，则不会触发事件。document.write可以正常工作：）（即使不建议这样做）

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');
    });
});