Question

我有一个包含不同元素的页面，每个页面使用css动画制作动画，每个元素将分别启动和停止。

我想知道是否可以使用javascript或jQuery通过一次单击将所有动画跳到最终状态。这可能吗？

假设页面具有此格式

   <div class="divone">text1</div>
<div class="divtwo">text2</div>
<div class="divthree">text3</div>

Answer 1

我有相同的问题并找到了解决方法：

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 4s 1 linear;
  animation-play-state: paused;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}
</style>
</head>
<body>

<h1>Change animation-play-state with JavaScript</h1>

<p>Click the buttons to Play/Pause the animation:</p>
<button onclick="myPlayFunction()">Play</button>
<button onclick="myPauseFunction()">Pause</button>

<script>
function myPlayFunction() {
  document.getElementById("myDIV").style.animationPlayState = "running";
}

function myPauseFunction() {
  document.getElementById("myDIV").style.animationFillMode = "forwards"
  document.getElementById("myDIV").style.animationDuration = "0s";
  document.getElementById("myDIV").style.animationPlayState = "paused";
}
</script>

<div id="myDIV"></div>

</body>
</html>

跳过css动画到最终状态

1 个答案: