Animation.onfinish
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La propiedad onfinish de la interfaz Animation (de la Web Animations API (en-US)) es el manejador de eventos para el evento finish. Este evento se envía cuando la animación termina de reproducirse.
El evento finish ocurre cuando la reproducción se completa de forma natural, así como cuando se llama al método Animation.finish() para que la animación termine inmediatamente.
Nota: El estado de reproducción "paused" reemplaza al estado "finished". Si la animación está pausada y finalizada, el estado"paused" será el único reportado. Puedes forzar el estado de la animación a "finished" configurando su startTime a document.timeline.currentTime - (Animation.currentTime * Animation.playbackRate).
Sintaxis
var finishHandler = Animation.onfinish;
Animation.onfinish = finishHandler;
Valor
Una función que debe ser llamada para manejar el evento finish, o null si no se establece ningún manejador para el evento finish.
Ejemplos
Animation.onfinish es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land Growing/Shrinking Alice Game. Aquí hay una instancia en la que agregamos eventos de puntero a un elemento después de que su animación de opacidad se haya desvanecido:
// Agrega una animación a los créditos finales del juego.
var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);
// Pone en Pausa dichos créditos.
bringUI.pause();
// Esta función elimina los eventos de puntero en los créditos.
hide(endingUI);
// Cuando los créditos se hayan desvanecido,
// volvemos a agregar los eventos de puntero cuando terminen.
bringUI.onfinish = function () {
endingUI.style.pointerEvents = "auto";
};
Especificaciones
| Specification |
|---|
| Web Animations # dom-animation-onfinish |
| Web Animations # finish-event |
Compatibilidad con navegadores
BCD tables only load in the browser