Question

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

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

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

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

Answer 1

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

Answer 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

Answer 3

这是因为：

在JSFiddle环境中不允许使用document.write，可能会破坏你的小提琴。

您可以使用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

Animationend事件未触发：在元素之后

3 个答案: