@Lineez
Собираю коллекцию шпаргалок с интернетов

Как сделать последовательную анимацию блоков на чистом Js?

Доброго времени суток, господа, по мере изучения "Js". возник такой вопрос: "Как сделать последовательную анимацию блоков (или еще чего угодно) на чистом JS?".
https://codepen.io/lineez/pen/bGePZdR - пример того что у меня получается сейчас, а именно: сразу все блоки делают анимацию одновременно; мне же необходимо сделать ее последовательно: то есть так, чтобы сначала первый блок начинал анимацию, потом второй и т.д., при этом, насколько я понимаю, варианта может быть два:
1) анимация второго блока начинается до завершения анимации первого;
2) анимация второго блока начинается после завершения анимации первого.

Принимается любая информация по вопросу, в том числе статьи и другой текст. Спасибо.
  • Вопрос задан
  • 111 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
button.addEventListener('click', async () => {
  for (const el of cards) {
    await el.animate([
      { transform: 'rotateX(0deg)' },
      { transform: 'rotateX(180deg)' },
    ], {
      duration: 1000,
      easing: 'linear',
      fill: 'forwards',
    }).finished;
  }
});
Ответ написан
@Gary_Ihar
JS *овнокодер
Можно еще добавить delay: key*1000, после fill: 'forwards',
И в будущем подогнать под ваши условия 1 и/или 2.

Вот , что на выходе должно быть
button.addEventListener('click', () => {
	cards.forEach((el, key) => {
		// console.log(`Animation: ${key} start!`);

			el.animate([
				{transform: "rotateX(0deg)"},
				{transform: "rotateX(180deg)"},
			], {
				duration: 1000,
				easing: 'linear',
				fill: 'forwards',
        delay: key*1000,
			})

		// console.log(`Animation: ${key} end!`);
	})
})
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
https://developer.mozilla.org/en-US/docs/Web/API/H...
Слушай animationend у одного елемента и рекурсивно меняй класс следующему
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
Sportrecs Москва
от 150 000 до 200 000 ₽
02 дек. 2020, в 22:29
12000 руб./за проект
02 дек. 2020, в 20:48
5000 руб./за проект
02 дек. 2020, в 19:55
4000 руб./за проект