我正在尝试使用简单的按钮更改 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>
关于javascript - 更改在 IE 11 中不起作用的 DIV 的旋转速度,使用 JS 更新 CSS 动画属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56816517/