Асинхронная функция с ожиданием и обещанием ⇐ Javascript

[Anonymous]

Я создаю веб-анимацию с помощью JS, используя асинхронную функцию.
Первая анимированная последовательность включает в себя две анимации, выполняемые одновременно: «animLineLeft» и «animLineRight». После завершения первой последовательности я хотел бы запустить вторую последовательность, а затем третью.
Проблема в том, что вторая последовательность выполняется так же, как и первая.

Код: Выделить всё

function animate(elem, animation) {
return new Promise((resolve, reject) => {
function handleAnimationEnd() {
console.log("animation ended...");
resolve(elem);
}
elem.addEventListener("animationend", handleAnimationEnd, { once: true });
elem.classList.add(animation);
});
}

async function init() {
const lineLeft = document.querySelector(".js-line-left");
const lineRight = document.querySelector(".js-line-right");
const logo = document.querySelector(".js-logo");
const content = document.querySelectorAll(".js-content");

// First sequence
const animLineLeft = animate(lineLeft, "is-visible");
const animLineRight = animate(lineRight, "is-visible");

await Promise.all([animLineLeft.finished, animLineRight.finished]);

// Second sequence
await animate(logo, "is-visible");

// Third sequence
for (const el of content) {
await animate(el, "is-visible");
}
}

init();

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... nd-promise