如何在不单击第二次的情况下重复切换 CSS 动画类？答案

【问题标题】：How can I repeatedly toggle a CSS animation class without a second click?如何在不单击第二次的情况下重复切换 CSS 动画类？
【发布时间】：2021-12-03 16:55:50
【问题描述】：

我希望 div 框的颜色和大小在单击按钮时具有动画效果并返回其原始值。这是我的代码示例：

document.getElementById("andAction").addEventListener("click", function() {
    document.getElementById("box").classList.toggle("animi");
})

.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width:20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}


@keyframes blob {
  0%  { 
         background-color: #999;
      }
  50% { 
        background-color: #F9086D;
        transform: scale(2);
        background-color: red;
        border-radius: 20px;
      }
  100% { 
        background-color: #999;          
      }
 }

.animi {
  animation-name: blob;
  animation-duration:3s;
  animation-iteration-count:1;
}

<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

问题

我的问题是我正在使用切换。这意味着我必须第二次点击两次。另一个品种是classList.add，然后再次删除。这导致没有结果，因为没有为用户启动动画。我唯一能做的就是使用超时。

问题

我感觉还有别的办法？

【问题讨论】：

标签： javascript css animation css-animations

【解决方案1】：

只需添加一些 js 以在动画完成后自动删除该类，并将您的初始行为更改为不切换而仅添加该类。您可以通过使用https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event 来实现。

const box=document.getElementById("box");

document.getElementById("andAction").addEventListener("click", function() {
  box.classList.add("animi");
});

box.addEventListener('animationend', () => {
  box.classList.remove("animi");
});

.thing {
  transform: translate(150px, 100px);
}

.box {
  background-color: #999;
  padding: 2px;
  color: black;
  width: 20px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

@keyframes blob {
  0% {
    background-color: #999;
  }
  50% {
    background-color: #F9086D;
    transform: scale(2);
    background-color: red;
    border-radius: 20px;
  }
  100% {
    background-color: #999;
  }
}

.animi {
  animation-name: blob;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

<button id="andAction" class="button">button</button>

<div id="box" class="box">1</div>

【讨论】：

我再次更新了不双重绑定animationend事件，请务必复制我的sn-ps JS的最新版本。您也可以对答案进行投票，使其与其他答案更加不同。

【解决方案2】：

您可以在动画结束时收听onanimationend 事件以删除该类，而无需依赖难以维护的计时器：

const boxElement = document.getElementById("box")

boxElement.addEventListener('animationend', (e) => {
  // if the target it the box (it's triggered by animations on children too)
  // and the animation name is `blob` (it's triggered by any animation)
  // remove the class
  if (e.target === boxElement && e.animationName === "blob") {
    boxElement.classList.remove('animi');
  }
})

document.getElementById("andAction").addEventListener("click", function() {
    boxElement.classList.add("animi");
})

【讨论】：