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 des Animation-Interfaces wird ausgelöst, wenn die Animation das Abspielen beendet, sei es, wenn die Animation natürlich endet oder wenn die Methode Animation.finish() aufgerufen wird, um die Animation sofort zu beenden.
Hinweis:
Der Wiedergabestatus "paused" hat Vorrang vor dem Wiedergabestatus "finished"; wenn die Animation sowohl pausiert als auch beendet ist, wird der Status "paused" derjenige sein, der gemeldet wird. Sie können die Animation in den Status "finished" 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.
addEventListener("finish", (event) => { })
onfinish = (event) => { }
Ereignistyp
Ein AnimationPlaybackEvent. Erbt von Event.
Beispiele
Animation.onfinish wird mehrmals im Alice in Web Animations API Land Growing/Shrinking Alice Game verwendet. Hier ist ein Beispiel, bei dem wir Zeigerereignisse zu einem Element nach dessen Opazitätsanimation, die es eingeblendet hat, zurückgeben:
// 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 |