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 der Animation Schnittstelle wird ausgelöst, wenn die Animation entweder auf natürliche Weise abgeschlossen ist oder wenn die Animation.finish() Methode aufgerufen wird, um die Animation sofort zu beenden.

Hinweis: Der "paused" Abspielstatus hat Vorrang vor dem "finished" Abspielstatus; wenn die Animation sowohl pausiert als auch beendet ist, wird der "paused" Status gemeldet. Sie können die Animation in den "finished" Status zwingen, 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 Ereignishandler-Eigenschaft.

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

Ereignistyp

Ein AnimationPlaybackEvent. Erbt von Event.

Event AnimationPlaybackEvent

Eigenschaften des Ereignisses

Zusätzlich zu den unten aufgeführten Eigenschaften sind Eigenschaften der Elternschnittstelle, 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 Spiel verwendet. Hier ist ein Beispiel, wo wir Zeigerereignisse an ein Element zurückgeben, nachdem dessen Deckkraftanimation es eingeblendet hat:

js
// 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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch