改变在IE 11中不工作的DIV的旋转速度，使用JS来更新CSS动画属性

Changing rotation speed of a DIV not working in IE 11, using JS to update CSS animation properties

本文关键字：JS 使用 更新 属性 动画 CSS 速度 旋转 IE DIV 工作      更新时间：2023-09-26

我试图用简单的按钮改变div的旋转速度。它适用于Chrome，但不适用IE。这是IE的限制吗?

var speed = 3;
document.getElementById("speedText").innerHTML = speed + "s";
function changeSpeed(change) {
  speed = speed + change;
  document.getElementById("speedText").innerHTML = speed + "s";
  document.getElementById("rotationDiv").style.animationDuration = speed + "s";
  $("#rotationDiv").load(location.href + " #rotationDiv");
}
#rotationDiv {
  width: 200px;
  height: 200px;
  background-color: blue;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rotationDiv"></div>
<p id="speedText"></p>
<button id="button1" onclick="changeSpeed(-1)">Speed Up</button>
<button id="button2" onclick="changeSpeed(1)">Slow Down</button>

你必须删除并重新添加动画才能让它接受更改。

在改变速度后，将animation-name更改为其他东西，然后在setTimeout中设置animation-name。这是一个hack，但它的技巧。

var speed = 3;
document.getElementById("speedText").innerHTML = speed + "s";
function changeSpeed(change) {
  speed = speed + change;
  document.getElementById("speedText").innerHTML = speed + "s";
  document.getElementById("rotationDiv").style.animationDuration = speed + "s";
  document.getElementById("rotationDiv").style.animationName = "x";
  setTimeout(function(){
    document.getElementById("rotationDiv").style.animationName = "";
  },0);
  $("#rotationDiv").load(location.href + " #rotationDiv");
}
#rotationDiv {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  background-color: blue;
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1" onclick="changeSpeed(-1)">Speed Up</button>
<button id="button2" onclick="changeSpeed(1)">Slow Down</button>
<p id="speedText"></p>
<div id="rotationDiv"></div>

相关文章：