Первая анимированная последовательность включает в себя две анимации, выполняемые одновременно: «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
