时间戳

首页 > 解决方案 > Wow.js 不会在不同的时间间隔为一个元素使用两个类

javascript - Wow.js 不会在不同的时间间隔为一个元素使用两个类

问题描述

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

例如，到达时我想要一个淡入淡出效果。所以我这样做：

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

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

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

这不起作用，并且看不到心跳效果。

笔记：

另一方面，如果我最初没有为图像设置淡入淡出效果，那么图像会在 3000 毫秒后获得心跳效果。

因此，像这样的独立代码运行良好。

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

我无法弄清楚这个问题的原因。

标签： javascriptwow.js

解决方案

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

根据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();

推荐阅读