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

Question

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

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

Принимается любая информация по вопросу, в том числе статьи и другой текст. Спасибо.

Answer 1

[0xD34F]

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;
  }
});

Comments

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

Благодарю за содействие. Будем почитать.

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/E...
Status - working draft, для домашних проектов можно использовать, нов продакшн не тянул бы

[0xD34F]

Владимир, это надо было в комментарий к вопросу.

[Владимир]

0xD34F, это касается ответа, в вопросе не использовали Animation API.

[0xD34F]

Владимир, да ну? Присмотритесь к коду внимательнее.

[Владимир]

0xD34F, Ok, sorry

Answer 2

[Gary_Ihar]

Можно еще добавить 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!`);
	})
})

Comments

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

Интересное решение, а все думал: как же им разный "delay" сделать.
Спасибо.

Answer 3

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/H...
Слушай animationend у одного елемента и рекурсивно меняй класс следующему