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 März 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.currentTimeSchreibgeschützt-
Die aktuelle Zeit der Animation, die das Ereignis erzeugt hat.
AnimationPlaybackEvent.timelineTimeSchreibgeschü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 |
Browser-Kompatibilität
Loading…