Как решить проблему с Animate.css?

Question

[DTHRT]

Всем привет!

Помогите пожалуйста разобраться.
work3.dthrt.com
Перед вами появятся две ячейки (VK и What's App).
Игнорируем эффект при наводке - с ним все ок.

В ДАННЫЙ МОМЕНТ РАБОТАЕТ ТОЛЬКО ЯЧЕЙКА С VK.
Если мы наведем на ячейку с vk - она перевернется и появится кнопка "попробовать"
После клика на кнопку "попробовать" наплывает сверху экран. При нажатии на крестик - экран "уплывает".

Вроде все здорово, но попробуйте проделать то же самое сначала...

При повторном алгоритме действий, экран наплывает, но сразу исчезает...
Это и есть проблема :( .

Теперь, как я все реализовал:
Есть две кнопки:
кнопка "попробовать" , которая активирует наплыв блока
кнопка "x", которая активирует наплыв блока за экран , тем самым он потом там исчезает.

// Vk
let vkInstructTrigger = document.querySelector('.regist-btn.vk'); //кнопка "попробовать"
let vkInstruct = document.querySelector('#instruction-vk'); //сам блок, который наплывает и уплывает

let closeWindow = document.querySelector('.close-window'); //кнопка "x"

// Animations - классы animate.css
let animationClass = "animate__animated";
let animationIn = "animate__slideInDown";
let animationOut = "animate__slideOutDown";

// Open Vk instructions

// Тут при клике на кнопку "попробовать" добавляются классы к наплывному блоку и стиль display:flex (с самого начала у блока display:none)
vkInstructTrigger.addEventListener('click', () =>{
  vkInstruct.classList.add(animationClass, animationIn);
  vkInstruct.style.display = "flex";

// А Тут просто по событию animationend чистятся все классы (чтобы можно было заново проиграть анимацию)
vkInstruct.addEventListener('animationend', () => {  
  vkInstruct.classList.remove(animationClass, animationIn);
  });
})

// Тут при клике на кнопку "x" добавляются классы уплыва
closeWindow.addEventListener('click', () =>{
  vkInstruct.classList.add(animationClass, animationOut);

  // А Тут просто по событию animationend чистятся все классы (чтобы можно было заново проиграть анимацию) и вставляется стиль display:none;
  vkInstruct.addEventListener('animationend', () => {  
  vkInstruct.classList.remove(animationClass, animationIn);
  vkInstruct.style.display = "none";
  });
})

Если отслеживать через dev tools , то можно заметить что при повторном клике на "попробовать" проигрывается если можно так сказать "второй" animationend с display:none. Хотя при первом разе все норм. Я так понимаю, что я просто перезаписываю функции события и во второй раз получается лютая каша.

Вопрос: как мне сделать это по уму? Можно ли как-то разделить данные "события" что они не накладывались друг на друга? Или есть способ вообще легче и более грамотнее?

П.с На сайта animate.css приведен способ через Promise

const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd() {
      node.classList.remove(`${prefix}animated`, animationName);
      node.removeEventListener('animationend', handleAnimationEnd);

      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd);
  });

Он намного грамотнее, однако я не могу сделать так, чтобы при при первом случае display становился fixed, а при втором none.

Помогите пожалуйста :(

Answer 1

[RAX7]

У тебя при нажатии на кнопку закрыть каждый раз вешается обработчик на animationend, который удаляет классы с элемента и скрывает его. Этот обработчик срабатывает в конце любой анимации на элементе, не важно была это анимация закрытия или открытия.
Поправить можно так:

// Close
closeWindow.addEventListener('click', () =>{
  vkInstruct.classList.add(animationClass, animationOut);
  
  vkInstruct.addEventListener('animationend', () => {
    vkInstruct.classList.remove(animationClass, animationIn, animationOut);
    vkInstruct.style.display = "none";
  }, {once: true}); // <-  once: true сработает один раз и удалит обработчик
});

Comments

[DTHRT]

Блиин спасибо !!!