Animationend事件不触发:after元素

Animationend event not firing on :after element

本文关键字：after 元素 事件 Animationend      更新时间：2023-09-26

我在: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/

真心希望有人能帮我解决这个问题。

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

看起来像是IE的bug，或者可能是DEV团队设计的，不知道。一个变通的方法，真的很糟糕，可以在元素上设置一个假动画来处理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');
    });
});

参见DEMO jsFiddle

这是因为:

文档。在JSFiddle环境中不允许写操作，并且可能会中断你的小提琴。

您可以使用console.log()来调试:

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

更新小提琴

或:

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

更新小提琴

相关文章：