diff options
Diffstat (limited to 'files/es/web/api/htmlelement')
| -rw-r--r-- | files/es/web/api/htmlelement/accesskey/index.html | 24 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/animationend_event/index.html | 82 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/dataset/index.html | 132 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/focus/index.html | 164 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/style/index.html | 52 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/transitioncancel_event/index.html | 164 | ||||
| -rw-r--r-- | files/es/web/api/htmlelement/transitionend_event/index.html | 184 |
7 files changed, 454 insertions, 348 deletions
diff --git a/files/es/web/api/htmlelement/accesskey/index.html b/files/es/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..4d77ae4133 --- /dev/null +++ b/files/es/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,24 @@ +--- +title: Element.accessKey +slug: Web/API/HTMLElement/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +original_slug: Web/API/Element/accessKey +--- +<div>{{APIRef("DOM")}}</div> + +<div> </div> + +<p><span id="result_box" lang="es"><span>La propiedad</span> <strong><span>Element.accessKey</span></strong> <span>establece la pulsación</span><span> de teclado</span> <span>mediante el cual un</span> <span>usuario puede presionar</span> <span>para saltar a</span> <span>este elemento</span><span>.</span></span></p> + +<div class="note"> +<p><span id="result_box" lang="es"><span>Nota: la propiedad</span> <strong><span>Element.accessKey</span></strong> <span>se usa raramente</span> <span>debido a sus</span> <span>múltiples</span> <span>conflictos con las asociaciones de teclas</span> <span>que ya están presentes</span> <span>en los navegadores</span><span>.</span> <span>Para evitar</span> <span>esto,</span> <span>los navegadores implementan</span> <span>el comportamiento</span> <span>tecla de acceso</span> <span>si</span> <span>se pulsan las claves</span> <span>con otras teclas</span> <span>"cualificadas</span><span>" (como</span> <span>Alt</span> <span>+</span> <span>tecla de acceso</span><span>)</span><span>.</span></span></p> +</div> + +<p> </p> + +<p> </p> diff --git a/files/es/web/api/htmlelement/animationend_event/index.html b/files/es/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..55a49ff105 --- /dev/null +++ b/files/es/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,82 @@ +--- +title: animationend +slug: Web/API/HTMLElement/animationend_event +translation_of: Web/API/HTMLElement/animationend_event +original_slug: Web/Events/animationend +--- +<p>El evento <code>animationend</code> es lanzado cuando una animación CSS se ha completado.</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;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Si</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Acción por defecto</dt> + <dd style="margin: 0 0 0 120px;">None</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>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><code>boolean</code></td> + <td>Does the event normally bubble?</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>Is it possible to cancel the event?</td> + </tr> + <tr> + <td><code>animationName</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 animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for <code>animation-delay</code>, in which case the event will be fired with an elapsedTime of (-1 * delay).</td> + </tr> + </tbody> +</table> + +<h2 id="Eventos_relacionados">Eventos relacionados</h2> + +<ul> + <li>{{Event("animationstart")}}</li> + <li>{{Event("animationend")}}</li> + <li>{{Event("animationiteration")}}</li> +</ul> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> +</ul> diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 10c6f555f9..0000000000 --- a/files/es/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">La propiedad <code><strong>dataset</strong></code> en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los <a href="/es/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de datos personalizados</a> (<code>data-*</code>) de cada uno de los elementos.</span> Está disponible el acceso en HTML y en el DOM. Dentro del <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad<strong> </strong><code>dataset</code><strong> </strong>puede leerse, pero no modificarse directamente. En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del <code>dataset</code>, que representan a cada atributo correspondiente. Además un HTML <code><strong>data-</strong></code><em>attribute</em> y su correspondiente DOM<strong> </strong><code>dataset.</code><em>property</em> no comparten el mismo nombre, pero son siempre similares:</p> - -<ul> - <li>El nombre de un attributo de datos comienza en HTML con <code>data-</code>. Sólo puede estar formado por letras minúsculas, números y los caracteres: guión (<code>-</code>), punto (<code>.</code>), dos puntos (<code>:</code>) y guión bajo (<code>_</code>) -- NUNCA una letra mayúscula (A a Z).</li> - <li>El nombre del atributo en JavaScript será el del correspondiente atributo HTML pero en camelCase, sin guiones, puntos, etc.</li> -</ul> - -<p>Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Conversion_de_nombres">Conversion de nombres</h3> - -<p><code>dash-style</code> a <code>camelCase</code>: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas</p> - -<ul> - <li>el prefijo <code>data-</code> es eliminado (incluyendo el guión);</li> - <li>por cada guión (<code>U+002D</code>) seguido de un caracter ASCII que sea una letra en minuscula<span style="line-height: 1.5;"> </span><code>a</code><span style="line-height: 1.5;"> a la </span><code>z</code><span style="line-height: 1.5;">, el guión es removido y la letra se transforma en su contraparte en mayuscula;</span></li> - <li>otros caracteres (incluyendo otros guines) se mantienen intactos.</li> -</ul> - -<p><code>camelCase</code> a <code>dash-style</code>: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:</p> - -<ul> - <li>Restricción: Un guión no debe ser inmediatamente seguido por un un caracter ASCII que sea una letra minuscula de la <code>a</code> a la <code>z</code> (antes de la conversión);</li> - <li>se agrega el prefijo <code>data-</code>;</li> - <li>cualquier caracter ASCII que sea una letra mayuscula de la <code>A</code> a la <code>Z</code> se convierte en un guión seguido de se contraparte en minuscula;</li> - <li>otros caracteres se mantienen intactos.</li> -</ul> - -<p>La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.</p> - -<p>Por ejemplo, el atributo nombrado <code>data-abc-def</code> corresponde a la clave <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Accediendo_valores">Accediendo valores</h3> - -<ul> - <li>Los atributos pueden ser definidos y obtenidos usando el nombre camelCase (la clave) como la propiedad de un objeto del dataset, como en <code>element.dataset.keyname</code></li> - <li>Los atributos tambien pueden ser definidos y obtenidos usando la sintaxis de corchetes, como en <code>element.dataset[keyname]</code></li> - <li>El <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">operador <code>in</code></a> puede ser usado para checar si un atributo dado existe.</li> -</ul> - -<h3 id="Definiendo_valores">Definiendo valores</h3> - -<ul> - <li>Cuando un atributo es definido, su valor siempre se convierte a string. Por ejemplo, <code>null</code> siempre se convierte en el string "null".</li> - <li>Cuando quieras remover un atributo, puedes usar el <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operador <code>delete</code></a>.</li> -</ul> - -<h2 id="Sintaxis">Sintaxis</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes</a></li> - <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> -</ul> diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html deleted file mode 100644 index d615cbf12e..0000000000 --- a/files/es/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/focus ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p>El método <code><strong>HTMLElement.focus()</strong></code> fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.</p> - -<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">element.focus(); -element.focus(focusOption); // Object parameter</pre> - -<h3 id="Parámetros" name="Parámetros">Parámetros</h3> - -<dl> - <dt><code>focusOptions</code> {{optional_inline}} {{experimental_inline}}</dt> - <dd>Es un objeto con la siguiente propiedad:</dd> - <dd> - <dl> - <dt><code>preventScroll</code> {{optional_inline}}</dt> - <dd>Es un valor <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a>: - <ul> - <li>Si es <code>false</code>, el método hará scroll hasta que el elemento esté visible en la ventana del navegador</li> - <li>Si es <code>true</code>, el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.</li> - </ul> - </dd> - </dl> - </dd> -</dl> - -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> - -<h3 id="Enfocar_un_campo_de_texto" name="Enfocar_un_campo_de_texto">Enfocar un campo de texto</h3> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">focusMethod = function getFocus() { - document.getElementById("myTextField").focus(); -}</pre> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><input type="text" id="myTextField" value="Campo de texto."> -<p></p> -<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button> -</pre> - -<h4 id="Resultado">Resultado</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_text_field') }}</p> - -<h3 id="Enfocar_un_botón" name="Enfocar_un_botón">Enfocar un botón</h3> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="brush: js">focusMethod = function getFocus() { - document.getElementById("myButton").focus(); -} -</pre> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><button type="button" id="myButton">Púlsame!</button> -<p></p> -<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button> -</pre> - -<h4 id="Resultado_2">Resultado</h4> - -<p>{{ EmbedLiveSample('Focus_on_a_button') }}</p> - - - -<h3 id="Enfocar_con_focusOption" name="Enfocar_con_focusOption">Enfocar con focusOption</h3> - -<h4 id="JavaScript_3">JavaScript</h4> - -<pre class="brush: js">focusScrollMethod = function getFocus() { - document.getElementById("myButton").focus({preventScroll:false}); -} -focusNoScrollMethod = function getFocusWithoutScrolling() { - document.getElementById("myButton").focus({preventScroll:true}); -} - -</pre> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button> -<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button> - -<div id="container" style="height: 1000px; width: 1000px;"> -<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button> -</div> - -</pre> - -<h4 id="Resultado_3">Resultado</h4> - -<p>{{ EmbedLiveSample('Focus_prevent_scroll') }}</p> - -<h2 id="Especificación" name="Especificación">Especificación</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}</td> - <td>{{Spec2('DOM2 HTML')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}</td> - <td>{{Spec2('DOM1')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Notas">Notas</h2> - -<p>Si se llama a <code>HTMLElement.focus()</code> desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método <code>event.preventDefault()</code> para evitar que el foco abandone <code>HTMLElement</code><strong>.</strong></p> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - - - -<p>{{Compat("api.HTMLElement.focus")}}</p> - -<h2 id="Ver_también" name="Ver_también">Ver también</h2> - -<ul> - <li>Método DOM {{domxref("HTMLElement.blur()")}} para quitar el foco sobre un elemento.</li> - <li>{{ domxref("document.activeElement") }} para saber cuál es el elemento enfocado actualmente.</li> -</ul> diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html deleted file mode 100644 index 62c8903b72..0000000000 --- a/files/es/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Element.style -slug: Web/API/HTMLElement/style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -<p>{{ ApiRef("HTML DOM") }}</p> - -<h3 id="Summary" name="Summary">Resumen</h3> - -<p>Devuelve un objeto que representa el atributo <code>style </code>del elemento.</p> - -<h3 id="Example" name="Example">Ejemplo</h3> - -<pre class="eval">var div = document.getElementById("div1"); -div.style.marginTop = ".25in"; -</pre> - -<h3 id="Notes" name="Notes">Notas</h3> - -<p>Ya que la propiedad <code>style </code>tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones <em>in-line</em> hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. </p> - -<p>Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style <em>in-line</em> y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.</p> - -<p>Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar <a href="/Es/DOM/Window.getComputedStyle" title="en/DOM/window.getComputedStyle">window.getComputedStyle</a> en su lugar.</p> - -<p>Mira la lista de Propiedades CSS del DOM (<a href="/es/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a>) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.</p> - -<p>Generalmente es mejor usarla propiedad <code>style </code>que usar <code>elt.setAttribute('style', '...')</code>, ya que el uso de la propiedad <code>style </code>no reemplazará otras propiedades CSS que puedan especificarse en el atributo <code>style</code>.</p> - -<p>Los estilos <em>no</em> pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en <code>elt.style = "color: blue;"</code>. Esto es porque el atributo <code>style </code>devuelve un objeto del tipo <code>CSSStyleDeclaration</code>. En su lugar, pueds establecer las propiedades como:</p> - -<pre class="eval">elt.style.color = "blue"; // Asignación directa - -var st = elt.style; -st.color = "blue"; // Asignación Indirecta -</pre> - -<p>El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos<code> elt </code>y sus valores heredados: </p> - -<pre class="eval">var elt = document.getElementById("elementIdHere"); -var out = ""; -var st = elt.style; -var cs = window.getComputedStyle(elt, null); -for (x in st) - out += " " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n"; -</pre> - -<p> </p> - -<h3 id="Specification" name="Specification">Especificación</h3> - -<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> diff --git a/files/es/web/api/htmlelement/transitioncancel_event/index.html b/files/es/web/api/htmlelement/transitioncancel_event/index.html new file mode 100644 index 0000000000..9bc3f53e51 --- /dev/null +++ b/files/es/web/api/htmlelement/transitioncancel_event/index.html @@ -0,0 +1,164 @@ +--- +title: transitioncancel +slug: Web/API/HTMLElement/transitioncancel_event +tags: + - DOM + - Evento + - Referencia + - eventos +translation_of: Web/API/HTMLElement/transitioncancel_event +original_slug: Web/Events/transitioncancel +--- +<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> diff --git a/files/es/web/api/htmlelement/transitionend_event/index.html b/files/es/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..3005798cae --- /dev/null +++ b/files/es/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,184 @@ +--- +title: transitionend +slug: Web/API/HTMLElement/transitionend_event +tags: + - DOM + - Event + - Referencia + - Transiciones CSS + - Transiciones CSS3 + - TransitionEvent + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +original_slug: Web/Events/transitionend +--- +<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> |