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

Question

我希望 div 框的颜色和大小在单击按钮时具有动画效果，并且 return 恢复为原始值。这是我的代码示例：

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 然后再次删除。这不会导致任何结果，因为没有为用户启动动画。我唯一能做的就是超时工作。

问题

我感觉还有别的办法？

Answer 1

只需添加一些 js 即可在动画结束后自动删除 class，并将您的初始行为更改为不切换而仅添加 class。您可以通过使用 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>

Answer 2

您可以监听 onanimationend 事件以在动画结束时移除 class 而无需依赖更难维护的计时器：

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");
})

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

How can I repeatedly toggle a CSS animation class without a second click?

javascript

css

animation

css-animations

问题

问题