如何无需二次点击即可重复切换CSS动画类触发动画效果

问题根因 #

你遇到的二次点击触发问题核心原因是：首次点击添加.animi类后，动画执行完成类仍保留在元素上，第二次点击toggle仅会移除类不会触发动画，第三次点击重新添加类才会再次执行动画，因此看起来需要点击两次才能触发第二次动画。
你之前尝试先加类再移除不生效是因为浏览器会合并短时间内的连续样式变更，直接添加又移除类会被浏览器判定为无状态变更，不会触发动画渲染。

最优实现方案 #

方案1：animationend事件监听（推荐，兼容绝大多数浏览器） #

该方案不需要定时器，完全和动画生命周期绑定，时间精准不会出现不同步问题，仅需修改JS逻辑即可：

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

actionBtn.addEventListener("click", function() {
  // 先移除动画类重置状态
  box.classList.remove("animi");
  // 强制触发浏览器重排，让浏览器感知到状态变更，避免样式变更被合并
  void box.offsetWidth;
  // 添加动画类触发动画
  box.classList.add("animi");
});

// 监听动画结束事件，自动移除动画类为下一次触发做准备
box.addEventListener("animationend", function() {
  box.classList.remove("animi");
});

该方案完全复用你现有CSS动画代码，改动量极小，也符合样式与逻辑分离的开发规范。

方案2：Web Animations API（更灵活） #

如果你不想维护CSS类状态，可以直接用原生JS的动画API实现，不需要额外定义.animi类：

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

// 定义动画关键帧，对应CSS中的@keyframes规则
const blobKeyframes = [
  { backgroundColor: "#999" },
  { backgroundColor: "red", transform: "scale(2)", borderRadius: "20px", offset: 0.5 },
  { backgroundColor: "#999" }
];

// 动画配置
const animConfig = {
  duration: 3000,
  iterations: 1
};

actionBtn.addEventListener("click", function() {
  // 每次点击直接执行动画
  box.animate(blobKeyframes, animConfig);
});

该方案逻辑更直观，还可以在运行时动态修改动画参数，适合需要灵活调整动画的场景。

内容的提问来源于stack exchange，提问作者Maik Lowrey