Javascript 在IE 11中，此动画在结尾处闪烁

我有一个横幅，通过一些背景图像动画。动画在CSS中定义，并使用中的

triggerAnimation（）

函数从JavaScript触发，如下所示。它的工作原理是在

当前横幅

div上方设置

下一个横幅

div的动画，然后在动画完成并重置后将

当前横幅

背景更新为新图像。从

next banner

到

current banner

的交换应该是即时的，这样用户就看不到了

这在Firefox和Chrome中都能正常工作，但在IE11中，它会在动画结束时偶尔闪烁。在

animationend

回调进行交换之前，它会重置回动画的开始状态，导致新图像与旧图像之间出现明显的闪烁，然后返回。它的发生是不可预测的，而且它发生的频率似乎并不一致。有时，它几乎每次都会发生，而其他情况下，我必须等待5次或更多的转换才能看到它

有证据表明，这是由于

animationend

事件触发延迟引起的，因为如果我在动画本应结束后将超时设置为50毫秒，并在

animationend

回调中取消该超时，那么我的超时回调仅在闪烁发生时执行，在其行为正常时不执行

triggerAnimation（）

code:

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的问题，我如何防止这种情况发生？

将此代码添加到CSS文件：

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

---

我找到的最接近解决方案是在动画应该完成的时候设置一个超时，它“捕获”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

。在我的情况下，这不是问题。

我不知道这对你是否有用，但我曾经被你抱怨的同样的闪烁所困扰过（在IE中，是不是疯了？^^^）。无论如何，我解决这个问题的方法是将所有图像合并成一个精灵，将背景设置为结果图像，然后每次我想要更改图像时，我实际上都在更新背景位置，以便在精灵中显示正确的图像。这消除了闪烁，因为背景不再被替换，而是显示了一个不同的区域。@StefanBaiu谢谢你的建议，但我认为我们讨论的是不同的问题。闪烁的不是背景，而是animation.hmmm，当您在IE中时，可能会增加过渡时间？当然，动画将需要更长的时间，但可能看起来会更平滑。。。我只是说，我从来都不喜欢在浏览器中使用动画：）听起来很像IE11中的一个bug，在JavaScript中可能很难解决。事实上，当我观看你催眠的JSFIDLE时，我根本没有看到它，所以它可能在某种程度上依赖于硬件/等等（IE11广告说，漂亮的CSS内容是在GPU上完成的）@Katana314你使用的是什么操作系统？我曾在两台使用Windows8.1的不同计算机上看到过这种情况，但它们也都有类似的硬件。我刚才在Windows7电脑上看了几分钟后没有看到它，但它的硬件也有很大的不同。谢谢你的建议，但这没用。过滤器属性已在IE 10中删除，与CSS动画无关。