diff options
Diffstat (limited to 'files/es/web/events/transitionend/index.html')
-rw-r--r-- | files/es/web/events/transitionend/index.html | 183 |
1 files changed, 0 insertions, 183 deletions
diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/events/transitionend/index.html deleted file mode 100644 index 8370f0e39e..0000000000 --- a/files/es/web/events/transitionend/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -tags: - - DOM - - Event - - Referencia - - Transiciones CSS - - Transiciones CSS3 - - TransitionEvent - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -<p>El evento <code>transitionend</code> es lanzado cuando una <a href="/en-US/docs/CSS/Using_CSS_transitions">transición CSS</a> se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a <code>"none"</code>, entonces el evento no será generado.</p> - -<h2 id="Información_general">Información general</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Especificación</dt> - <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Transitions")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Interfaz</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("TransitionEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Burbuja</dt> - <dd style="margin: 0 0 0 120px;">Sí</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">Sí</dd> - <dt style="float: left; text-align: right; width: 120px;">Objetivo</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Acción</dt> - <dd style="margin: 0 0 0 120px;">undefined</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>propertyName</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name of the CSS property associated with the transition.</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{readonlyInline}}</td> - <td>Float</td> - <td>The amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of <code>transition-delay</code>.</td> - </tr> - <tr> - <td><code>pseudoElement</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).</td> - </tr> - </tbody> -</table> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Este ejemplo establece un manejador de evento para detectar el evento <code>transitionend</code>, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.</p> - -<pre class="brush: js">let element = document.getElementById("slidingMenu"); -element.addEventListener("transitionend", function(event) { - element.innerHTML = "Done!"; -}, false); -</pre> - -<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", "#transitionend", "transitionend")}}</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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>1.0<sup>[1]</sup><br> - 36</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>10.5<sup>[2]</sup><br> - 12<br> - 12.10<br> - 23</td> - <td>3.2<sup>[1]</sup><br> - 7.0.6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Edge</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>2.1</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>10<sup>[2]</sup><br> - 12<br> - 12.10</td> - <td>3.2<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como <code>webkitTransitionEnd</code>. Chrome 36 y WebKit 7.0.6 usan el estándar <code>transitionend</code>.</p> - -<p>[2] Implementado como <code>oTransitionEnd</code> desde Opera 10.5, como <code>otransitionend</code> desde la versión 12 y como el estándar <code>transitionend</code> desde la versión 12.10.</p> - -<h2 id="Véase_también">Véase también</h2> - -<p>La interfaz {{domxref("TransitionEvent")}}</p> - -<ul> - <li>{{event("transitionstart")}}, {{event("transitioncancel")}}</li> - <li>Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> -</ul> |