主页 / 问题 / 811250
Accepted
Eugen Eray
Asked:2020-04-08 21:54:21 +0000 UTC2020-04-08 21:54:21 +0000 UTC

记住动画在哪里结束

  • 772

你好！如何记住元素保留的位置？好吧，假设他转了 260º，我需要记住，以便稍后我可以从这个地方继续动画。

document.getElementById("btn").onclick = function(){
  document.getElementById("h").classList.add("anim");
};

document.getElementById("no").onclick = function(){
  document.getElementById("h").classList.remove("anim");
};
@keyframes wheely {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
@-webkit-keyframes wheely{
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}

.anim {animation: wheely 5s linear infinite;}
<div id="h">133722848</div>
<button id="btn">анимка</button>
<button id="no">нет</button>

javascript

1 个回答

  1. Best Answer

    var rotate = 0;
var startRotating;
document.getElementById("h").style.transform = 'rotate(' + rotate + 'deg)';

document.getElementById("btn").onclick = function(){
  var target = document.getElementById("h");
  startRotating = setInterval(rotatefunc, 10, target);
};

document.getElementById("no").onclick = function(){
  clearInterval(startRotating);
};

function rotatefunc(target) {
  rotate++;
  target.style.transform = 'rotate(' + rotate + 'deg)';
}
    #h {
  transform: rotate(200deg);
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="h">133722848</div>
<button id="btn">анимка</button>
<button id="no">нет</button>

    • 2

相关问题