跳過css動畫到最終狀態

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 個解決方案

解決方案1
0 2020-09-23 10:19:50

跳過css動畫到最終狀態

問題描述

1 個解決方案

解決方案1 0 2020-09-23 10:19:50

解決方案1
0 2020-09-23 10:19:50