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

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

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

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Artezio Минск
от 2 800 до 3 300 $
07 мар. 2021, в 03:18
1500 руб./за проект
06 мар. 2021, в 22:58
70000 руб./за проект
06 мар. 2021, в 22:36
10000 руб./за проект