嘿，这个问题我太熟了——这是Wow.js的「一次性处理」机制在搞鬼！让我给你拆解清楚：

问题根源 #

Wow.js的核心逻辑是页面加载时一次性扫描所有带wow类的元素，检测它们是否进入视口，然后自动添加对应的Animate.css动画类，同时会悄悄给元素打上「已处理」的标记。一旦标记完成，后续你再动态修改这个元素的动画类，Wow.js就完全不会再搭理它了。

你遇到的情况刚好对应两种场景：

• 初始不加fadeIn，3秒后加heartBeat生效：因为初始时元素只有wow类，没有动画类，Wow.js还没完成对它的「处理标记」，添加heartBeat时它会触发一次动画检测。
• 先加fadeIn再换heartBeat不生效：fadeIn执行完成后，元素已经被Wow.js标记为「已处理」，后续类的变化完全被忽略。

解决方案 #

这里给你几个实用的解决办法，按需选择：

方案1：手动触发动画（最稳妥，不依赖Wow.js后续检测）

既然Wow.js只是帮你触发Animate.css的动画，那第二个动画我们直接用原生JS手动处理，配合强制重绘让浏览器识别类的变化：

setTimeout(function () {
  // 移除旧动画类
  img.classList.remove("fadeIn");
  // 可选：移除wow类，避免Wow.js干扰后续操作
  img.classList.remove("wow");
  // 强制浏览器重绘，确保类变化被识别（关键步骤）
  void img.offsetWidth;
  // 添加新动画类
  img.classList.add("heartBeat");
}, 3000);

这里的void img.offsetWidth是核心，它会让浏览器强制重新计算元素布局，避免DOM操作被合并导致动画不触发。

方案2：让Wow.js重新识别元素

如果你还是想依赖Wow.js的机制，可以先移除wow类，重新添加后调用它的同步方法：

// 先初始化Wow实例（如果页面还没初始化的话）
const wowInstance = new WOW();
wowInstance.init();

setTimeout(function () {
  // 清除旧的动画类和wow类
  img.classList.remove("fadeIn", "wow");
  // 强制重绘
  void img.offsetWidth;
  // 重新添加wow和新动画类
  img.classList.add("wow", "heartBeat");
  // 让Wow.js重新扫描元素
  wowInstance.sync();
}, 3000);

不过这个方法可能会影响页面上其他Wow.js元素，所以更推荐方案1。

方案3：等第一个动画结束再切换（更自然的衔接）

如果你不是非要固定3秒切换，而是想等fadeIn动画完成后再执行heartBeat，可以监听动画结束事件：

img.addEventListener('animationend', function(event) {
  // 确认是fadeIn动画结束
  if (event.animationName === 'fadeIn') {
    img.classList.remove("fadeIn");
    void img.offsetWidth;
    img.classList.add("heartBeat");
  }
});

这种方式更符合动画的自然流转，不会出现两个动画重叠的情况。

内容的提问来源于stack exchange，提问作者Sheriff Hussain