使用Animate.css实现重复动画失效的JavaScript问题求助

我用JavaScript配合Animate.css实现网页元素动画时，碰到重复触发动画失效的问题。点击按钮触发bounceOutDown、淡入淡出这类动画，第一次执行正常，但重复点击就没反应了。试过重置动画相关常量，没用，不想靠刷新页面解决，求帮忙。

元素动画实现代码 #

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

动画触发代码 #

animateCSS('.wrapper1', 'bounceOutDown'); 

问题原因 #

核心问题是浏览器不会重复执行相同的CSS动画，除非检测到动画类的状态发生明确变更。原代码中，虽然在animationend事件里移除了动画类，但如果在动画未结束时重复调用函数，或者浏览器未完全同步类的移除状态，直接添加相同的类不会触发状态变化，动画也就不会重新执行。

解决方案 #

方案1：强制触发DOM重绘（推荐） #

修改animateCSS函数，先移除动画类，再通过读取元素的offsetHeight强制触发DOM重绘，让浏览器感知到类的变化后，再重新添加动画类：

const animateCSS = (element, animation, prefix = 'animate__') =>
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    // 先移除已有动画类，重置状态
    node.classList.remove(`${prefix}animated`, animationName);
    // 触发DOM重绘，确保浏览器处理类的移除操作
    void node.offsetHeight;
    // 重新添加动画类，触发新的动画
    node.classList.add(`${prefix}animated`, animationName);

    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

方案2：延迟添加动画类 #

如果重绘方式不生效，可通过setTimeout给浏览器预留处理类移除的时间，再添加动画类：

const animateCSS = (element, animation, prefix = 'animate__') =>
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.remove(`${prefix}animated`, animationName);
    
    // 延迟10ms添加类，确保浏览器完成类的移除操作
    setTimeout(() => {
      node.classList.add(`${prefix}animated`, animationName);
    }, 10);

    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

方案3：避免动画未结束时重复触发 #

如果是用户频繁点击按钮导致的问题，可以在动画执行期间禁用触发按钮，直到动画结束后再重新启用：

// 假设触发按钮的选择器是.btn-animate
const triggerBtn = document.querySelector('.btn-animate');

triggerBtn.addEventListener('click', async () => {
  // 点击后禁用按钮
  triggerBtn.disabled = true;
  // 执行动画
  await animateCSS('.wrapper1', 'bounceOutDown');
  // 动画结束后启用按钮
  triggerBtn.disabled = false;
});

内容的提问来源于stack exchange，提问作者Marlou Rentucan