Esta es una tecnolog铆a experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producci贸n.
La propiedad onfinish
de la interfaz Animation
(de la Web Animations API) 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.
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 | Status | Comment |
---|---|---|
Web Animations La definici贸n de 'Animation.onfinish' en esta especificaci贸n. |
Working Draft | Editor's draft. |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 39.0 | 48 (48)[1] | Sin soporte | Sin soporte | Sin soporte |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | 48.0 (48)[1] | Sin soporte | Sin soporte | Sin soporte |
[1] La Web Animations API solo est谩 habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled
en true
, y puedes deshabilitarlo en cualquier versi贸n de Firefox estableciendo esta propiedad en false
.