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

Добрый час, хабровчане, требуется помощь - внутривенно. К делу.
Делаю задание с интернета, помимо всего прочего, необходимо чтобы карточки начинали и заканчивали анимацию выводом в консоль (код прилагается https://codepen.io/lineez/pen/QWKedWz?editors=0011), сейчас у меня получилось реализовать так, что start/end выводятся одновременно, а не в начале и конце анимации соответственно. Сижу уже, да с 5 утра, наверное, за пк, голова не варит. Спать я, видимо, сегодня не буду, только если господа позволят-с.
P.s. В промисах, async/await и другой магии адептов - пока что не разбираюсь...
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Добавление класса перевёртыша выполняется мгновенно, но отображается анимацией в течение 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);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vabka
@vabka
Токсичный шарпист
P.s. В промисах, async/await и другой магии адептов - пока что не разбираюсь...

Разбирайся
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы