菜单按钮CSS animation失效：首次点击有效，后续无动画

这个问题我之前也碰到过！核心原因是浏览器的样式优化机制在搞鬼——当你在同一事件循环里快速切换两个动画类时，浏览器会把这些样式变更合并成一次重绘，直接跳到最终状态，完全跳过了动画的触发过程。首次点击正常是因为初始状态没有任何动画类，添加animate是从无到有的变化，浏览器会明确触发动画；但后续切换时，两个动画类的快速替换就被浏览器“偷懒”优化掉了。

下面给你几个靠谱的修复方案，按推荐程度排序：

方案一：用requestAnimationFrame触发重绘 #

requestAnimationFrame会在浏览器下一次重绘前执行回调，能确保样式变更被正确识别，是最优雅的解决方式：

function change(x) {
  const hasAnimate = document.querySelector(".animate");
  if (!hasAnimate) {
    x.classList.remove("animater");
    requestAnimationFrame(() => {
      x.classList.add("animate");
    });
  } else {
    x.classList.remove("animate");
    requestAnimationFrame(() => {
      x.classList.add("animater");
    });
  }
}

方案二：短暂延迟类切换（setTimeout） #

给浏览器留一点重绘的时间，用10ms左右的延迟就足够，兼容性也很好：

function change(x) {
  const hasAnimate = document.querySelector(".animate");
  if (!hasAnimate) {
    x.classList.remove("animater");
    setTimeout(() => {
      x.classList.add("animate");
    }, 10);
  } else {
    x.classList.remove("animate");
    setTimeout(() => {
      x.classList.add("animater");
    }, 10);
  }
}

方案三：强制触发回流（应急用） #

手动读取元素的布局属性（比如offsetHeight），强制浏览器触发回流，让它感知到样式变化。这种方式有点“暴力”，但应急时能用：

function change(x) {
  const hasAnimate = document.querySelector(".animate");
  if (!hasAnimate) {
    x.classList.remove("animater");
    // 强制触发回流，void用来避免返回值干扰
    void x.offsetHeight;
    x.classList.add("animate");
  } else {
    x.classList.remove("animate");
    void x.offsetHeight;
    x.classList.add("animater");
  }
}

另外提醒一下：如果你的动画类里用的是animation属性，也可以考虑监听animationend事件，确保上一个动画完全结束后再切换下一个类，这样能避免动画叠加的问题，但对于快速点击的场景，上面的方案更直接。

内容的提问来源于stack exchange，提问作者Player Mathinson