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
132
133
134
|
---
title: AnimationEvent.initAnimationEvent()
slug: Web/API/AnimationEvent/initAnimationEvent
tags:
- AnimationEvent
- Apps
- CSSOM
- Método(2)
- Não-padrão
- Obsolento
- Web Animations
translation_of: Web/API/AnimationEvent/initAnimationEvent
---
<p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p>
<h2 id="Sumário">Sumário</h2>
<p>O <code><strong>AnimationEvent.initAnimationEvent() </strong></code>é um método iniciado com o evento da animção criando um depreciativo {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} método.</p>
<p><code>AnimationEvent</code> criado desse modo não é confiável.</p>
<div class="note">
<p><strong>Note:</strong> Durante o processo de padronização, esse método foi removido das especificações. É que ele foi depreciado e esse processo foi removido da maioria das implementações . <strong>Não use este método</strong>; ao invés, use o construtor padrão, {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}, para criar um sintético {{domxref("AnimationEvent")}}.</p>
</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox"><em>animationEvent</em>.initAnimationEvent(<em>typeArg</em>, <em>canBubbleArg</em>, <em>cancelableArg</em>, <em>animationNameArg</em>, <em>elapsedTimeArg</em>);</pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><code>typeArg</code></dt>
<dd>Um {{domxref("DOMString")}} identificado com um tipo específico de evento animação que ocorreu. Os seguintes valores são aceitados:
<table class="standard-table">
<thead>
<tr>
<th scope="col">Valor</th>
<th scope="col">Significado</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>animationstart</code></td>
<td>A animação começou.</td>
</tr>
<tr>
<td><code>animationend</code></td>
<td>A animação terminou.</td>
</tr>
<tr>
<td><code>animationiteration</code></td>
<td>A iteração corrente se completou.</td>
</tr>
</tbody>
</table>
</dd>
<dt><code>canBubbleArg</code></dt>
<dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento pode ser bolha (<code>true</code>) ou não (<code>false)</code>.</dd>
<dt><code>cancelableArg</code></dt>
<dd>Uma {{domxref("Boolean")}} bandeira indicando se o evento associado pode ser evitado (<code>true</code>) ou não (<code>false)</code>.</dd>
<dt><code>animationNameArg</code></dt>
<dd>Um {{domxref("DOMString")}} contendo o valor do{{cssxref("animation-name")}} propriedade CSS associada com a transição.</dd>
<dt><code>elapsedTimeArg</code></dt>
<dd>Um ponto flutuante indicando a quantidade de tempo que a animação esteve rodando, em segundos, com o tempo do evento terminar, excluirá-se o tempo em que a animação esteve em pausa.Para um <code>"animationstart"</code> evento, <code>elapsedTime</code> é <code>0.0</code> a não ser que haja um valor negativo para <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay" title="The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.">animation-delay</a></code>, nesse caso o evento irá terminar com <code>elapsedTime</code> contendo <code>(-1 * </code><em>delay</em><code>)</code>.</dd>
</dl>
<h2 id="Especificações">Especificações</h2>
<p><em>Esse método é não-padrão e não é parte de qualquer especificação, no entanto ele esteve presente nos primeiros rascunhos de {{SpecName("CSS3 Animations")}}.</em></p>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoDesktop("6.0") }}<br>
Removed in {{ CompatGeckoDesktop("23.0") }}</td>
<td>10.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatGeckoMobile("6.0") }}<br>
Removed in {{ CompatGeckoMobile("23.0") }}</td>
<td>10.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li>
<li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li>
<li>The {{domxref("AnimationEvent")}} interface it belongs to.</li>
</ul>
|
