Как после завершения анимации удалить класс?

Question

[kamisarlapsha]

Привет, есть библиотека анимаций animate.css. Анимации добавляется кодом ниже:
$('#yourElement').addClass('animated fadeInDown');
Вопрос в том, как после завершения анимации удалить у элемента классы animated fadeInDown ? Должно получится так:
классы (animated fadeInDown) эти добавились, анимация сыграла, и классы снова удалились.

Answer 1

[Никита Егоров]

const el = document.getElementById('yourElement')

el.addEventListener('animationend', function() {
    el.classList.remove('animated fadeInDown')
})

Comments

[Денис]

Только скорее не transitionend, а animationend. Там библиотека именно на animation построена.

[kamisarlapsha]

Вот весь код:

new WOW().init();
    
    $(window).on('load', function () {
    setTimeout(function() {
       $('.header').addClass('animated fadeInDown');
    }, 500);
    });
    
    const el = document.getElementById('header');

    el.addEventListener('animationend', function() {
        el.classList.remove('animated fadeInDown')
    });

[kamisarlapsha]

А вот ошибка:
Cannot read property 'addEventListener' of null

[kamisarlapsha]

Денис, Все равно ошибка

[Никита Егоров]

kamisarlapsha,
Исправьте на это

const el = document.getElemenstByClassName('header')[0];

[Денис]

kamisarlapsha, изучите для начала нативный JS. Метод querySelector().
Если уж jQuery, то

$('.header').on('animationend', function(){
  $(this).removeClass('animated fadeInDown');
});

[kamisarlapsha]

Денис, Спасибо!

[kamisarlapsha]

Никита Егоров, Только при вашем решении почему все равно ошибка
document.getelementsbyclassname is not a function

[Денис]

kamisarlapsha, а вы вот прям так всё в нижнем регистре написали? )) Так-с, срочно к учебнику для новичков!

[kamisarlapsha]

Денис, нет, писал вот так:
document.getElemenstByClassName
Ошибка такая:
document.getElemenstByClassName is not a function
Но впрочем, на jQuery всё работает.

[Денис]

kamisarlapsha, буквы местами перепутали. Написали вы - getElemenstByClassName, нужно писать getElementsByClassName.

[Никита Егоров]

kamisarlapsha, не правильно написали... elemnTS, а у вас elemenST