如何在JS点击事件中添加多个CSS动画类并实现重复触发？

嘿，我来帮你搞定这两个动画相关的问题，咱们一个个说：

1. 如何在点击事件中为元素添加多个CSS动画类？ #

其实你代码里的写法已经是正确的啦！classList.add()方法支持同时传入多个类名作为参数，直接用逗号分隔就行：

function myFunction() { 
  document.getElementById("box").classList.add('animated', 'bounceIn'); 
}

如果你的类名是存在数组里的，还可以用ES6的扩展运算符来批量添加，比如：

const animationClasses = ['animated', 'bounceIn'];
document.getElementById("box").classList.add(...animationClasses);

2. 让动画每次点击都能触发（解决仅生效一次的问题） #

动画只执行一次的原因很简单：你第一次点击后，animated和bounceIn这两个类就一直留在#box元素上了，CSS动画默认只会在类从无到有的时候触发一次，后续再添加相同的类，浏览器不会重新执行动画。

这里给你两种靠谱的解决方法：

方法一：点击时先移除类，再延迟添加 #

通过短暂的延迟让浏览器识别到DOM类的变化，从而重新触发动画：

function myFunction() {
  const box = document.getElementById("box");
  // 先移除动画类
  box.classList.remove('animated', 'bounceIn');
  // 延迟10毫秒再添加，给浏览器一点更新DOM的时间
  setTimeout(() => {
    box.classList.add('animated', 'bounceIn');
  }, 10);
}

方法二：监听动画结束事件，自动移除类 #

这种方法更优雅，动画结束后自动把类去掉，下次点击直接加类就能触发：

// 先获取元素，避免每次点击都重新查询DOM
const box = document.getElementById("box");

// 监听动画结束事件，动画跑完就移除类
box.addEventListener('animationend', () => {
  box.classList.remove('animated', 'bounceIn');
});

function myFunction() {
  // 每次点击直接添加类就行，因为动画结束后已经被移除了
  box.classList.add('animated', 'bounceIn');
}

两种方法都能实现每次点击按钮都触发动画的效果，你可以根据自己的需求选一个～

内容的提问来源于stack exchange，提问作者MD.ALIMUL Alrazy