删除类不会停止 IE11 中的关键帧动画答案

【问题标题】：Removing class does not stop keyframe animation in IE11删除类不会停止 IE11 中的关键帧动画
【发布时间】：2019-11-22 18:15:17
【问题描述】：

下面的 sn-p 显示了我在 Internet Explorer 11 中发现的 css 动画问题的简化示例。

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

在 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>

【问题讨论】：

听起来像经典的 IE，你必须做其他事情才能让它停止。尝试添加一些随机类，看看它是否会导致它停止。或读取高度或导致您访问元素的 css 的内容。只是一个很大的重绘错误
感谢@epascarello 的指针——仅仅添加一个类或读取一个属性并不能完全解决问题，但遵循in this answer 的建议会强制重绘。如果您想将其粘贴为答案，我将编辑 q 并给您一些互联网积分

标签： javascript css css-animations internet-explorer-11

【解决方案1】：

我用 IE 11.1.18362.0 版本做了一个测试。在我的测试中，我发现尝试在 StackOverflow 代码 sn-p 中运行示例时会出现该问题。我尝试从 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 文件运行上述代码示例，以检查它是否有助于使其正常工作。

【讨论】：

嗯，我正在运行 11.48.17134，但我仍然看到运行您的示例的问题（尽管在按下“旋转”然后“停止”的第二个周期它可以工作）。无论哪种方式，这都是一个更复杂的现实世界示例的简化版本。删除类后隐藏和显示 div 似乎会强制重绘，正如上面的 cmets 中所指出的那样

【解决方案2】：

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

【讨论】：

IE 不是智能浏览器 --> 我觉得简单地说IE 不是浏览器 更正确;)

【解决方案3】：

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

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

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

【讨论】：

您的代码在 Firefox 93.0 中解决了同样的问题