更改DIV的旋转速度在IE 11中不起作用，使用JS更新CSS动画属性 [英] Changing rotation speed of a DIV not working in IE 11, using JS to update CSS animation properties

问题描述

我正在尝试使用简单的按钮来更改DIV的旋转速度。它适用于Chrome，但不适用于IE。

  var speed = 3; document.getElementById（ speedText）。innerHTML = speed + s;函数changeSpeed（change）{speed = speed + change; document.getElementById（ speedText）。innerHTML =速度+ s; document.getElementById（ rotationDiv）。style.animationDuration =速度+ s; $（＃rotationDiv）。load（location.href + #rotationDiv）;}  

  #rotationDiv {宽度：200像素；高度：200px；背景颜色：蓝色；动画名称：spin；动画时间：3秒； animation-iteration-count：无限； animation-timing-function：linear;} @ keyframes spin {from {transform：rotation（0deg）; }到{转换：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><按钮id = button1 onclick = changeSpeed（-1）>加速< / button><按钮id = button2 onclick = changeSpeed（1） > Slow Down< / button>  

解决方案

您必须删除并重新添加动画才能使其接受更改。

更改速度后，更改动画名称设置为其他名称，然后在 setTimeout 中设置动画名称回来。

  var speed = 3; document.getElementById（ speedText）。innerHTML =速度+ s；函数changeSpeed（change）{速度=速度+变化； document.getElementById（ speedText）。innerHTML =速度+ s; document.getElementById（ rotationDiv）。style.animationDuration =速度+ s; document.getElementById（ rotationDiv）。style.animationName = x; setTimeout（function（）{document.getElementById（ rotationDiv）。style.animationName =;}，0）; $（＃rotationDiv）。load（location.href + #rotationDiv）;}  

  #rotationDiv {宽度：50px;高度：50px；左边距：10px;背景颜色：蓝色；动画名称：spin；动画时间：3秒； animation-iteration-count：无限； animation-timing-function：linear;} @ keyframes spin {from {transform：rotation（0deg）; }到{转换：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><按钮id = button2 onclick = changeSpeed（1）>慢速< / button>< p id = speedText>< / p>< div id = rotationDiv >< / div>  

I'm trying to change the rotation speed of a DIV using simple buttons. It works in Chrome, but not IE. Is this a limitation of 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>

解决方案

You have to remove and re-add the animation to get it to pick up the changes.

After changing the speed, change the animation-name to a something else, then in a setTimeout, set animation-name back. It's a bit of a hack, but it does the trick.

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>

这篇关于更改DIV的旋转速度在IE 11中不起作用，使用JS更新CSS动画属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！