Добавление и удаление класса одновременно с использованием JQuery для обращения анимации

Question

Я сталкиваюсь с ошибкой "undefined не является объектом", вот мой код:

$("#photo-container h1").classList.remove("animate").exec(function(){
        setTimeout(function(){
          $("#photo-container h1").classList.add("animate-out")
        },1);
      });

Я пытаюсь добавить и удалить класс одновременно, чтобы я мог отменить анимацию , Я попытался сделать это без задержки, и это не работает. Я где-то читал, что вам нужно добавить небольшую задержку при добавлении второго класса для его работы.

Answer 1

Метод

jQuery для добавления класса называется .addClass()
jQuery. Метод для удаления класса называется .removeClass() * 1008. *

$("#photo-container h1").addClass("animate-out") 

в противном случае используйте .get(0) или [0] для извлечения HTMLElement из объекта jQuery перед использованием конструктора JavaScript Element.classList.

$("#photo-container h1")[0].classList.add("animate-out")

То же самое касается первая строка.
Кроме того, если вы хотите назначить слушателя на "animationend" (или "transitionend", если вы используете CSS3 transition) - тогда сделайте так:

const $H1 = $("#photo-container h1");

$H1.removeClass("animate animate-out");
$H1.on("animationend", function() {
  // Do something once the CSS3 keyframes animation ends
  if ( !$H1.is('.animate-out') ) {
    $H1.addClass("animate-out");
  } 
});