Question

我有一个通过一些背景图像动画的横幅。动画在CSS中定义，并使用this fiddle中的triggerAnimation()函数从JavaScript触发，并包含在下面。它的工作原理是在next-banner div顶部设置current-banner div，然后在动画完成并重置后将current-banner背景更新为新图像。从next-banner到current-banner的互换应该是即时的，以便用户不会看到它。

这在Firefox和Chrome中均可正常使用，但在IE 11中，它会在动画结束时偶尔闪烁。它会在animationend回调进行交换之前重置回动画的开始状态，从而导致从新图像到旧图像的明显闪烁，然后再返回。它不可预测地发生，并且似乎在经常它的发生方式上似乎是一致的。有时它几乎每次都会发生，而其他人在看到它之前必须等待5次或更多次转换。

有证据表明它是animationend事件触发后发生的，因为如果我在动画应该结束后将超时设置为50ms，并取消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。在我的情况下，这不是问题。

Answer 2

将此代码添加到CSS文件中：

html {
    filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

这个动画在IE 11结束时闪烁

2 个答案: