如何用classList.add实现按钮点击的重复动画效果？

问题原因 #

直接连续执行classList.remove()和classList.add()时，浏览器会合并DOM操作，相当于元素的类名没有发生实际变化，所以CSS动画不会重新触发。另外你之前的setTimeout写法有误——第二个参数需要传入毫秒数，不是2s这种字符串格式。

可行解决方案 #

方案1：用requestAnimationFrame等待重绘后添加类

通过requestAnimationFrame让浏览器完成一次重绘后再添加动画类，确保类名变化被浏览器识别：

function switchFunction() {
  const myButton = document.getElementById('switchButton');
  myButton.classList.remove('animationClass');
  // 等待浏览器完成重绘后再添加类
  requestAnimationFrame(() => {
    myButton.classList.add('animationClass');
  });
}

方案2：监听animationend事件自动移除类

动画结束后自动移除类，下次点击时重新添加即可触发动画，更精准匹配动画时长：

function switchFunction() {
  const myButton = document.getElementById('switchButton');
  // 先移除类（避免重复点击叠加）
  myButton.classList.remove('animationClass');
  // 强制触发重排（部分浏览器需此操作确保类变化被识别）
  void myButton.offsetWidth;
  myButton.classList.add('animationClass');
  
  // 动画结束后移除类并清理事件监听
  myButton.addEventListener('animationend', function removeClass() {
    myButton.classList.remove('animationClass');
    myButton.removeEventListener('animationend', removeClass);
  });
}

方案3：修正setTimeout的写法

把时间参数改成毫秒数（匹配动画时长1s，设置1000ms更准确）：

function switchFunction() {
  const myButton = document.getElementById('switchButton');
  myButton.classList.add('animationClass');
  // 动画结束后移除类
  setTimeout(() => {
    myButton.classList.remove('animationClass');
  }, 1000);
}

配套CSS和HTML（沿用你的原有代码） #

.animationClass {
  animation: rotate forwards 1s;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<button class="" id="switchButton" onclick="switchFunction()">Switch</button>

内容的提问来源于stack exchange，提问作者Yan gurevich