javascript - 通过 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

问题是因为第一次单击添加了类并触发了动画，但之后的第二次(以及每个偶数单击)删除了类，因此没有任何 react 。
要解决此问题，您可以使用 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%并再次返回，因此不需要它们。这也有助于使动画更流畅。