Анимация: событие finish

Событие finish интерфейса Animation срабатывает, когда анимация завершается, либо когда анимация завершается естественным путём, либо когда метод Animation.finish() вызывается для немедленного завершения анимации.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("finish", (event) => { })
onfinish = (event) => { }

Объект AnimationPlaybackEvent. Наследуется от Event.

Помимо перечисленных ниже свойств, доступны свойства из родительского интерфейса Event.

AnimationPlaybackEvent.currentTime Только для чтения

Текущее время анимации, которая сгенерировала событие.

AnimationPlaybackEvent.timelineTime Только для чтения

Значение времени шкалы анимации, которая сгенерировала событие.

Animation.onfinish используется несколько раз в игре «Растущая/Уменьшающаяся Алиса» в API анимаций Web Игра «Растущая/Уменьшающаяся Алиса». Вот один пример, где мы возвращаем события указателей элементу после того, как анимация непрозрачности сдвинула его:

// Add an animation to the game's ending credits
const endingUI = document.getElementById("ending-ui");
const bringUI = endingUI.animate(keysFade, timingFade);

// Pause said animation's credits
bringUI.pause();

// This function removes pointer events on the credits.
hide(endingUI);

// When the credits are later faded in,
// we re-add the pointer events when they're done
bringUI.onfinish = (event) => {
  endingUI.style.pointerEvents = "auto";
};

• Web Animations API
• Animation
• Animation.finish()