有没有办法在不使用超时的情况下重复点击按钮再次制作 CSS 动画 运行？

Question

我试图在单击按钮时向 运行 播放动画。现在，如果页面被刷新，它只会 运行 秒，并且在重复点击按钮时不会再次 运行。

function myPlayFunction(el){  document.getElementById("myTest").style.animationPlayState = "running";
}   

#myTest {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 1s;
  animation-play-state: paused;
}

@keyframes example {
  0% {background-color: yellow;}
  50% {background: purple;}
  100%{background: red;}
}

<div id="myTest"></div>

<div><button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button></div>

Answer 1

正如您在我的示例中看到的那样，我检测到 addEventListener 动画结束然后重置动画

const myTest = document.getElementById("myTest");
function myPlayFunction(el) {
  myTest.style.animationPlayState = "running";   
}
myTest.addEventListener("animationend", () =>{
  myTest.style.animation = 'none';
  myTest.offsetHeight;
  myTest.style.animation = null; 
}, false);

#myTest {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-play-state: paused;
}

@keyframes example {
  0% {
    background-color: yellow;
  }
  50% {
    background: purple;
  }
  100% {
    background: red;
  }
}

<div id="myTest"></div>
<div>
  <button onclick="myPlayFunction(this)" class="fas fa-play">&nbsp;&nbsp;Click this</button>
</div>