Animation: finish-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Das finish-Ereignis des Animation-Interfaces wird ausgelöst, wenn die Animation endet, entweder wenn die Animation auf natürliche Weise abgeschlossen wird oder wenn die Methode Animation.finish() aufgerufen wird, um die Animation sofort zu beenden.

Hinweis: Der "paused"-Zustand übertrumpft den "finished"-Zustand; wenn die Animation sowohl pausiert als auch beendet ist, wird der "paused"-Zustand gemeldet. Sie können die Animation in den "finished"-Zustand versetzen, indem Sie ihre startTime auf document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) setzen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onfinish = (event) => { }

Ereignistyp

Ein AnimationPlaybackEvent. Erbt von Event.

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind die Eigenschaften des übergeordneten Interfaces Event verfügbar.

AnimationPlaybackEvent.currentTime Schreibgeschützt: Die aktuelle Zeit der Animation, die das Ereignis erzeugt hat.
AnimationPlaybackEvent.timelineTime Schreibgeschützt: Der Zeitwert der Zeitleiste der Animation, die das Ereignis erzeugt hat.

Beispiele

Animation.onfinish wird mehrmals im Alice in Web Animations API Land Growing/Shrinking Alice Game verwendet. Hier ist ein Fall, bei dem wir Pointer-Ereignisse zurück zu einem Element hinzufügen, nachdem dessen Opazitätsanimation es eingeblendet hat:

// 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";
};

Spezifikationen

Specification
Web Animations # dom-animation-onfinish
Web Animations # finish-event