时间戳

首页 > 解决方案 > 通过 JS 触发的 CSS 动画仅每隔一次点击播放一次

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

问题描述

我想做一个简单的 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>

标签： javascripthtmlcsscss-animations

解决方案

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

要解决此问题，您可以使用该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%

推荐阅读