javascript - 此动画在 IE 11 中最后闪烁

Question

我有一个通过一些背景图片动画显示的横幅。动画在 CSS 中定义，并使用 triggerAnimation() 从 JavaScript 触发。在 this fiddle 中发挥作用并包含在下面。它通过动画 next-banner 来工作div 在 current-banner 之上div，然后更新 current-banner动画完成并重置后新图像的背景。来自 next-banner 的交换到 current-banner应该是即时的，这样用户就不会看到它。

这在 Firefox 和 Chrome 中都可以正常工作，但在 IE 11 中偶尔会在动画结束时闪烁。它在 animationend 之前重置回动画的开始状态。回调进行交换，导致从新图像到旧图像然后再返回的明显闪烁。它的发生是不可预测的，而且它发生的频率似乎也不一致。有时它几乎每次都会发生，而其他情况下我必须等待 5 次或更多次转换才能看到它。

有证据表明它是由 animationend 引起的事件触发晚了，因为如果我在动画应该结束后将超时设置为 50 毫秒，并在 animationend 中取消该超时回调，那么我的超时回调只在闪烁发生时执行，正常时不执行。

triggerAnimation()代码:

window.triggerAnimation = function(element, animation, callback) {
    // omitted stuff to determine correct property and event names, which seems to work correctly
    element.style[propName] = animation;
    element.addEventListener(eventName, function(e) {
        element.style[propName] = "";
        element.removeEventListener(eventName, arguments.callee);
        if (callback) callback(e);
    }, false);
};

这是我的代码还是 IE 的问题，我该如何防止这种情况发生？

Answer 1

我发现最接近解决方案的是在动画应该完成之后设置一个超时，这会“捕获”IE 未正确触发回调的情况。然后，当回调被正确触发时，实际的事件处理程序会取消超时。

所以，这就是我最终得到的结果:

window.triggerAnimation = function(element, animation, callback) {
    // Omitted stuff to determine correct property and event names
    element.style[propName] = animation;

    // Extract the duration from the animation CSS and convert it to ms.
    var duration = parseFloat(animation.match(/\d+\.\d+/g)[0], 10) * 1000;

    var timeout = setTimeout(function() {
        element.style[propName] = "";
        element.removeEventListener(eventName, arguments.callee);
        if (callback) callback(null);
    }, duration + 10);
    element.addEventListener(eventName, function(e) {
        clearTimeout(timeout);
        element.style[propName] = "";
        element.removeEventListener(eventName, arguments.callee);
        if (callback) callback(e);
    }, false);
};

唯一的两个缺点是:1)它仍然很少闪烁，但频率要低得多，也不太明显；和 2) 任何时候调用超时而不是事件处理程序，事件对象 (e) 不会传递给 callback。就我而言，这不是问题。