Animation: finish-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2020 browserübergreifend verfügbar.
Das finish-Ereignis der Animation-Schnittstelle wird ausgelöst, wenn die Wiedergabe der Animation endet: entweder weil sie regulär abgeschlossen wird oder weil die Methode Animation.finish() aufgerufen wird, um sie sofort zu beenden.
Hinweis:
Der Wiedergabestatus "paused" hat Vorrang vor "finished". Wenn die Animation sowohl pausiert als auch abgeschlossen ist, wird "paused" gemeldet. Sie können die Animation in den Status "finished" versetzen, indem Sie ihre startTime auf document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate) setzen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("finish", (event) => { })
Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:
onfinish = (event) => { }
Ereignistyp
Ein AnimationPlaybackEvent. Erbt von Event.
Beispiele
Animation.onfinish wird im Spiel Growing/Shrinking Alice Game aus „Alice in Web Animations API Land“ mehrfach verwendet. Im folgenden Beispiel werden Pointer-Ereignisse für ein Element wieder aktiviert, nachdem es durch eine Opazitätsanimation eingeblendet wurde:
// 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
| Spezifikation |
|---|
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |