From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/animation/onfinish/index.html | 131 +++++++++++++++++++++++++ 1 file changed, 131 insertions(+) create mode 100644 files/es/web/api/animation/onfinish/index.html (limited to 'files/es/web/api/animation/onfinish') diff --git a/files/es/web/api/animation/onfinish/index.html b/files/es/web/api/animation/onfinish/index.html new file mode 100644 index 0000000000..592014f698 --- /dev/null +++ b/files/es/web/api/animation/onfinish/index.html @@ -0,0 +1,131 @@ +--- +title: Animation.onfinish +slug: Web/API/Animation/onfinish +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference + - onfinish + - waapi +translation_of: Web/API/Animation/onfinish +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad onfinish de la interfaz {{domxref("Animation")}} (de la Web Animations API) es el manejador de eventos para el evento {{event("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 {{domxref("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 {{domxref("Animation.startTime", "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 {{event("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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-onfinish', 'Animation.onfinish' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[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

+ + -- cgit v1.2.3-54-g00ecf