blob: 3f9c622bd291b1e8e2acd0e7379acc0e87cba8a1 (
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: transitioncancel
slug: Web/Events/transitioncancel
tags:
- DOM
- Evento
- Referencia
- eventos
translation_of: Web/API/HTMLElement/transitioncancel_event
---
<p>{{SeeCompatTable}}</p>
<p>El evento <code>transitioncancel</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> es cancelada.</p>
<p>Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.</p>
<h2 id="Información_general">Información general</h2>
<dl>
<dt>Interfaz</dt>
<dd>{{domxref("TransitionEvent")}}</dd>
<dt>Burbuja</dt>
<dd>Sí</dd>
<dt>Cancelable</dt>
<dd>No</dd>
<dt>Objetivo</dt>
<dd>{{domxref("document")}}, {{domxref("element")}}</dd>
<dt>Acción por defecto</dt>
<dd>Ninguna</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Propiedad</th>
<th scope="col">Tipo</th>
<th scope="col">Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyinline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>El objetivo del evento (the topmost target in the DOM tree).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyinline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>El tipo de evento.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyinline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>Si el evento normalmente se propaga o no</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyinline}}</td>
<td>{{domxref("Boolean")}}</td>
<td>Si el evento es cancelable o no</td>
</tr>
<tr>
<td><code>propertyName</code>{{readonlyinline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>El nombre de la propiedad CSS asociada con la transición.</td>
</tr>
<tr>
<td><code>elapsedTime</code>{{readonlyinline}}</td>
<td>{{domxref("Float")}}</td>
<td>
<p>La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de <code>transition-delay</code>.</p>
</td>
</tr>
<tr>
<td><code>pseudoElement</code>{{readonlyinline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>
<p>El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con 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 (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop(53)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoMobile(53)}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li>El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}</li>
<li>La interfaz {{domxref("TransitionEvent")}}</li>
<li>{{event("transitionstart")}}, {{event("transitionend")}}</li>
<li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li>
</ul>
|
