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

Question

我想制作一个简单的JavaScript点击动画。我的问题是，当我点击按钮时，动画被执行，但是当我再次点击按钮时，没有任何反应。第三次点击动画再次播放。我想做到这一点，动画在第二次点击时播放。这是我的代码

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

问题是因为第一次点击添加了 class 并触发了动画，而第二次（以及每一次偶数点击）删除了 class，所以没有任何反应。

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

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>

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

CSS animation triggered through JS only plays every other click

html

javascript

css

css-animations