blob: 592014f698c8ca16ff3edaba6b6605b57eccbbcf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: Animation.onfinish
slug: Web/API/Animation/onfinish
tags:
- API
- Animacion
- Animaciones Web
- Experimental
- Reference
- onfinish
- waapi
translation_of: Web/API/Animation/onfinish
---
<p>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</p>
<p>La propiedad <code><strong>onfinish</strong></code> de la interfaz {{domxref("Animation")}} (de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a>) es el manejador de eventos para el evento {{event("finish")}}. <span id="result_box" lang="es"><span>Este evento se envía cuando la animación termina de reproducirse</span></span>.</p>
<p>El evento <code>finish</code> 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.</p>
<div class="note">
<p>El estado de reproducción <code>"paused"</code> reemplaza al estado <code>"finished"</code> ; Si la animación está pausada y finalizada, el estado<code>"paused"</code> será el único reportado. Puedes forzar el estado de la animación a <code>"finished"</code> configurando su {{domxref("Animation.startTime", "startTime")}} a <code>document.timeline.currentTime - (<em>Animation</em>.currentTime * <em>Animation</em>.playbackRate)</code>.</p>
</div>
<h2 id="Sintaxis"><span class="highlight-span">Sintaxis</span></h2>
<pre class="syntaxbox">var <em>finishHandler</em> = <em>Animation</em>.onfinish;
<em>Animation</em>.onfinish = <em>finishHandler</em>;</pre>
<h3 id="Valor">Valor</h3>
<p>Una función que debe ser llamada para manejar el evento {{event("finish")}} , o <code>null</code> si no se establece ningún manejador para el evento <code>finish</code>.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p><code>Animation.onfinish</code> es utilizado en varias ocasiones en el juego de Alice in Web Animations API Land <a href="http://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010">Growing/Shrinking Alice Game</a>. 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:</p>
<pre class="brush: js">// <span id="result_box" lang="es"><span>Agrega una animación a los créditos finales del juego.</span></span>
var endingUI = document.getElementById("ending-ui");
var bringUI = endingUI.animate(keysFade, timingFade);
// Pone en Pausa dichos créditos.
bringUI.pause();
// <span id="result_box" lang="es"><span>Esta función elimina los eventos de puntero en los créditos.</span></span>
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';
};
</pre>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Web Animations', '#dom-animation-onfinish', 'Animation.onfinish' )}}</td>
<td>{{Spec2('Web Animations')}}</td>
<td>Editor's draft.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome(39.0)}}</td>
<td>{{CompatGeckoDesktop(48)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile(48)}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[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 <code>dom.animations-api.core.enabled</code> en <code>true</code>, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en <code>false</code>.</p>
<h2 id="Ver_también" style="line-height: 30px; font-size: 2.14285714285714rem;">Ver también</h2>
<ul>
<li><a href="/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a></li>
<li>{{domxref("Animation")}}</li>
<li>{{domxref("Animation.finish()")}}</li>
</ul>
|
