通过 JS 触发的 CSS 动画仅每隔一次点击播放一次

Question

我想做一个简单的 JavaScript onclick 动画。我的问题是当我点击按钮时，动画被执行，但是当我再次点击按钮时，什么也没有发生。在第三次单击时，动画再次播放。我想做到这一点，动画在第二次点击时播放。 这是我的代码”

var anim = document.getElementById("anim");

anim.onclick = function highA() {

    var willCheck = document.getElementById("contactId");
    if (!willCheck.classList.contains("highAnim")) {
        willCheck.classList.add("highAnim");
    } else {
        willCheck.classList.remove("highAnim");
    }
}

#contactId { background: red;}

.highAnim {
    background-color: var(--white);
    animation-name: highcheck;
    animation-duration: 0.35s;
    animation-timing-function: ease-in-out;
}

@keyframes highcheck {
    0% {transform: rotate(0);}
    25% {transform: rotate(1deg);}
    50% {transform: rotate(2deg);}
    75% {transform: rotate(1deg);}
    100% {transform: rotate(0);}
}

<a onclick="anim()" id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>

Answer 1

问题是因为第一次单击添加了类并触发了动画，但之后的第二次（以及每个偶数单击）删除了该类，因此没有任何反应。

要解决此问题，您可以使用animationend 事件在动画结束后自动删除该类。这样，当您下次再次单击时，该类将再次添加到元素中并播放动画。试试这个：

var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");

anim.addEventListener('click', () => {
  willCheck.classList.add("highAnim");
});

willCheck.addEventListener('animationend', () => {
  willCheck.classList.remove("highAnim");
});

#contactId { background: red; }

.highAnim {
  background-color: var(--white);
  animation-name: highcheck;
  animation-duration: 0.35s;
  animation-timing-function: ease-in-out;
}

@keyframes highcheck {
  0% { transform: rotate(0); }   
  50% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>

请注意，我删除了动画中的 25% 和 75% 项目，因为它是从 0% 到 50% 并再次返回的线性运动，因此不需要它们。这也有助于使动画更流畅。

Answer 2

另一个使用animationiteration的想法

var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");

anim.addEventListener('click', () => {
  willCheck.style.animationPlayState="running";
});

willCheck.addEventListener('animationiteration', () => {
  willCheck.style.animationPlayState="paused";
});

#contactId {
  background: red;
  animation: highcheck 0.35s ease-in-out infinite paused;
}

@keyframes highcheck {
  50% {
    transform: rotate(2deg);
  }
}

<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>