Wow.js不在不同的时间间隔为一个元素取两个类

Question

我有一个图像元素，我想在其上应用两个动画类，一个在到达时，另一个在某个固定时间。

例如，在到达时，我想要fadeIn效果。所以我这样做：

img.classList.add("wow");
img.classList.add("fadeIn");

一段时间后，我再次想在同一张图像上添加心跳效果。所以我尝试了这样的东西：

setTimeout(function () {
img.classList.remove("fadeIn");
img.classList.add("heartBeat");
},3000);

这不起作用，也看不到听觉效果。

注意：

另一方面，如果我最初没有为图像设置fadeIn效果，那么图像在3000ms后会产生心跳的效果。

因此，像这样的独立代码运行得非常好。

setTimeout(function () {
img.classList.add("heartBeat");
},3000);

我无法找出这个问题的原因。

Answer 1

您可以在WOW实例的callback中使用该函数。

根据wow.js文档的说法，每次启动动画时都会触发它，并且"传入的参数是正在进行动画处理的DOM节点"(box，但在这种情况下，我直接使用img变量(。

因此，当它被触发时，我们可以立即删除.fadeIn类，这不会影响动画，因为它是用JavaScript内联添加的。此外，在3秒钟后，我们移除样式属性(导致"淡入"动画(，并添加将触发下一个心跳动画的.heartBeat类。

img.classList.add("wow");
img.classList.add("fadeIn");
new WOW({
callback: function(box) {
img.classList.remove("fadeIn");
setTimeout(function () {
img.removeAttribute("style");
img.classList.add("heartBeat");
},3000);
}
}).init();