Сode review, как улучшить функионал?

Question

[Егор Кондратьев]

Добрый час, хабровчане, требуется помощь - внутривенно. К делу.
Делаю задание с интернета, помимо всего прочего, необходимо чтобы карточки начинали и заканчивали анимацию выводом в консоль (код прилагается https://codepen.io/lineez/pen/QWKedWz?editors=0011), сейчас у меня получилось реализовать так, что start/end выводятся одновременно, а не в начале и конце анимации соответственно. Сижу уже, да с 5 утра, наверное, за пк, голова не варит. Спать я, видимо, сегодня не буду, только если господа позволят-с.
P.s. В промисах, async/await и другой магии адептов - пока что не разбираюсь...

Answer 1

[Сергей Соколов]

Добавление класса перевёртыша выполняется мгновенно, но отображается анимацией в течение 1 секунды (см. стиль .active:

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
console.log(`Card ${key + 1} end!`); // выполнится почти одновременно с предыдущими строками

Поймать конец CSS-анимации можно примерно: установив setTimeout на то же время, что длится анимация:

console.log(`Card ${key + 1} start!`);
el.classList.add('active');
setTimeout(() => console.log(`Card ${key + 1} end!`), 1000);

Более грамотный вариант слушать событие окончания анимации. См. transitionend и animationend

el.addEventListener('transitionend', () => {
  console.log(`Card ${key + 1} end!`);
});

spoiler

setTimeout(() => {
        console.log(`Card ${key + 1} start!`);
        const onTransitionEnd = () => {
          console.log(`Card ${key + 1} end!`);
          el.removeEventListener('transitionend', onTransitionEnd);
        }
        el.addEventListener('transitionend', onTransitionEnd); 
        el.classList.add('active');
      }, ms);

Comments

[Kovalsky]

transitionend?

[WbICHA]

Kovalsky, не пойму, Серый ответ отредактировал или твой коммент на что-то другое указывает?

[Kovalsky]

WbICHA, да, он поправил ответ

[Егор Кондратьев]

Спасибо за ответ, (setTimeout(() => console.log(`Card ${key + 1} end!`), 1000);) что-то подобное я уже пробовал, отлов конца анимации - та еще каша для консоли, видимо по другому никак. Штош.

Answer 2

[Василий Банников]

P.s. В промисах, async/await и другой магии адептов - пока что не разбираюсь...

Разбирайся