Esta página fue traducida del inglés por la comunidad, pero no se mantiene activamente, por lo que puede estar desactualizada. Si desea ayudar a mantenerlo, descubra cómo activar las configuraciones regionales inactivas.

Animation.onfinish

Experimental

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
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.

Ver también