Ничего себе. js не брать два класса для элемента в разные промежутки времени

Question

У меня есть элемент image , к которому я хочу применить два класса анимации , один по прибытии и один в какое-то фиксированное время.

Например По прибытии я хочу эффект fadeIn . Итак, я делаю это:

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

Я снова хочу добавить эффект heartbeat на том же изображении через некоторое время. Поэтому я попробовал что-то вроде этого:

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

Это не работает, и эффект сердцебиения не виден.

Примечание:

Вкл. с другой стороны, если я изначально не настроил для изображения эффект fadeIn , то после 3000 мс изображение получит эффект heartbeat .

Так что автономный код, подобный этому, работает отлично.

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

Я не могу выяснить причину этой проблемы.

Answer 1

Вы можете использовать функцию внутри callback экземпляра WOW.

Согласно wow. js docs , он запускается каждый раз, когда запускается анимация, и «передаваемый аргумент - это анимируемый узел DOM» (box, но в этом случае я непосредственно использую переменную img).

Итак, когда она срабатывает, мы можем немедленно удалить класс .fadeIn, который не повлияет на анимацию, потому что она была добавлено inline с JavaScript. Кроме того, через 3 секунды мы удаляем атрибут style (который вызвал анимацию «затухания») и добавляем класс .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();