删除 class 不会停止 IE11 中的关键帧动画

Question

下面的代码片段显示了我在 Internet Explorer 11 中发现的 css 动画问题的简化示例。

旋转按钮将“.spin”class 添加到 div，这会更改横幅的颜色并开始旋转。
停止按钮从 div 中删除了“.spin”class，这意味着它应该恢复到原来的颜色并停止旋转。

在 IE11 中，第 2 步不起作用 - 它会更改颜色但不会停止动画。奇怪的是，如果您使用开发人员工具运行进行尝试，它会按预期工作。

我是不是做错了什么或者这是一个已知的错误？尽管我的 google-fu 可能缺少它，但我一直无法找到任何参考资料。

var banner = document.getElementById('banner');
var spinButton = document.getElementById("spin-button");
var stopButton = document.getElementById("stop-button");

spinButton.addEventListener("click", function(){
  banner.classList.add("spin");
})

stopButton.addEventListener("click", function(){
  banner.classList.remove("spin");
})

.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div>
  <div id="banner">
    <p>
      Hello World
    </p>
  </div>
  <button id="spin-button">Spin</button>
  <button id="stop-button">Stop</button>
</div>

Answer 1

我用IE 11.1.18362.0版本做了测试。在我的测试中，我发现在尝试运行 Whosebug 代码片段中的示例时会产生问题。我尝试运行来自 HTML 文件的代码，发现你的代码工作正常。即使未打开控制台，它也能正常工作。

测试代码：

<!doctype html>
<html>
<head>
<style>
.spin {
  background: #FF0000;
  color: #FFF;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

</head>
<body>
<div>
  <div id="banner">
    <p>
      Hello World
    </p>
  </div>
  <button id="spin-button">Spin</button>
  <button id="stop-button">Stop</button>
</div>
<script>
var banner = document.getElementById('banner');
var spinButton = document.getElementById("spin-button");
var stopButton = document.getElementById("stop-button");

spinButton.addEventListener("click", function(){
  banner.classList.add("spin");
})

stopButton.addEventListener("click", function(){
  banner.classList.remove("spin");
})
</script>
</body>
</html>

在 IE 11 中的输出：

我建议您使用 HTML 文件尝试运行上面的代码示例，以检查它是否有助于使其正常工作。

Answer 2

IE 不是智能浏览器，您必须全面定义以防您希望它以您想要的方式工作。您通常可以通过在 js 代码顶部添加 'use strict' 或使用 polyfill 来解决此问题，但这些并不是真正的解决方案。在IE中同样的情况，我们面临bubble up事件，那么你需要一个声明，如果点击发生了然后继续做。查看此 link 了解更多信息。

Answer 3

正如 epascarello 在评论中指出的那样，这是一个 IE11 错误，解决方案是强制浏览器重绘受影响的元素。在上面的示例中，只需更新元素 style.display 属性就足以停止动画：

stopButton.addEventListener("click", function(){
   banner.classList.remove("spin");
   banner.style.display = "block";
})

在我的现实世界问题中，我使用的是 jQuery，因此在删除 class 后在我的元素上调用 .show() 就足够了。

删除 class 不会停止 IE11 中的关键帧动画

Removing class does not stop keyframe animation in IE11

javascript

css

css-animations

internet-explorer-11