From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- files/fr/web/api/htmlelement/accesskey/index.html | 22 ++ .../api/htmlelement/animationend_event/index.html | 81 ++++++++ .../animationiteration_event/index.html | 83 ++++++++ .../htmlelement/animationstart_event/index.html | 81 ++++++++ files/fr/web/api/htmlelement/dataset/index.html | 102 ---------- files/fr/web/api/htmlelement/focus/index.html | 223 --------------------- files/fr/web/api/htmlelement/innertext/index.html | 42 ++++ files/fr/web/api/htmlelement/style/index.html | 57 ------ files/fr/web/api/htmlelement/tabindex/index.html | 25 --- .../api/htmlelement/transitionend_event/index.html | 192 ++++++++++++++++++ 10 files changed, 501 insertions(+), 407 deletions(-) create mode 100644 files/fr/web/api/htmlelement/accesskey/index.html create mode 100644 files/fr/web/api/htmlelement/animationend_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationiteration_event/index.html create mode 100644 files/fr/web/api/htmlelement/animationstart_event/index.html delete mode 100644 files/fr/web/api/htmlelement/dataset/index.html delete mode 100644 files/fr/web/api/htmlelement/focus/index.html create mode 100644 files/fr/web/api/htmlelement/innertext/index.html delete mode 100644 files/fr/web/api/htmlelement/style/index.html delete mode 100644 files/fr/web/api/htmlelement/tabindex/index.html create mode 100644 files/fr/web/api/htmlelement/transitionend_event/index.html (limited to 'files/fr/web/api/htmlelement') diff --git a/files/fr/web/api/htmlelement/accesskey/index.html b/files/fr/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..2d84dd6dae --- /dev/null +++ b/files/fr/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,22 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - DOM + - Element + - Propriété + - Raccourcis clavier + - Reference +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propriété Element.accessKey définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

+ +
+

Note : La propriété Element.accessKey est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme Alt + accesskey).

+
diff --git a/files/fr/web/api/htmlelement/animationend_event/index.html b/files/fr/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..1fdeba6e63 --- /dev/null +++ b/files/fr/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationend +slug: Web/Events/animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

L'événement animationend est déclenché quand une animation CSS est terminée.

+ +

Informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element, Window
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationiteration_event/index.html b/files/fr/web/api/htmlelement/animationiteration_event/index.html new file mode 100644 index 0000000000..df8e3d89be --- /dev/null +++ b/files/fr/web/api/htmlelement/animationiteration_event/index.html @@ -0,0 +1,83 @@ +--- +title: animationiteration +slug: Web/Events/animationiteration +translation_of: Web/API/HTMLElement/animationiteration_event +--- +

L'événement animationiteration est déclenché lorsqu'une itération d'une animation se termine. Cet événement ne se produit pas pour les animations avec animation-iteration-count valant 1.

+ +

informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Synchronisme
+
synchronous
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/animationstart_event/index.html b/files/fr/web/api/htmlelement/animationstart_event/index.html new file mode 100644 index 0000000000..407bcb6dea --- /dev/null +++ b/files/fr/web/api/htmlelement/animationstart_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationstart +slug: Web/Events/animationstart +translation_of: Web/API/HTMLElement/animationstart_event +--- +

L'événement animationstart est déclenché quand une animation CSS a commencé. Si animation-delay est défini alors le déclenchement se fera une fois le delai expiré. Un délai négatif causera un déclenchement de l'événement avec un elapsedTime équivalent à la valeur absolue du délai.

+ +

Informations générales

+ +
+
Spécification
+
CSS Animations
+
Interface
+
AnimationEvent
+
Propagation
+
Oui
+
Annulable
+
Non
+
Cible
+
Document, Element
+
Action par défaut
+
Aucune
+
+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'événement (la plus haute cible dans l'arbre du DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type de l'événement.
bubbles {{ReadOnlyInline}}booleanEst-ce que l'événement se propage?
cancelable {{ReadOnlyInline}}booleanEst-il possible d'annuler l'événement?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}Le nom de la propriété CSS associéee à la transition.
elapsedTime {{ReadOnlyInline}}FloatLe temps durant lequel l'animation a durée, en secondes, quand l'événement est déclenché, excepté le temps lorsque l'animation était en pause. Pour un événement animationstart, elapsedTime vaut zéro à moins que animation-delay ne soit négatif, et dans ce cas, l'événement sera déclenché avec un elapsedTime de (-1 * delay).
+ +

Evénements liés

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/dataset/index.html b/files/fr/web/api/htmlelement/dataset/index.html deleted file mode 100644 index fa7ece8acc..0000000000 --- a/files/fr/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - Propriété - - Référence(2) - - dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -

{{ APIRef }}

- -

La propriété HTMLElement.dataset fournit un accès en mode lecture et écriture, à tous les attributs de données sur mesure (data-*) définis sur l'élément. C'est un tableau associatif de DOMString, qui associe à chaque nom d'attribut de données sur mesure la valeur qu'il contient.

- -

Le nom d'un attribut de données sur mesure commence par data-. Il ne doit contenir que des lettres, des nombres et les caractères suivants : tiret (-), point (.), deux-points (:), tiret bas (_). De plus, il ne doit pas contenir des lettres majuscules ASCII (A à Z).

- -

Un nom d'attribut de données sur mesure est transformé en clef pour l'entrée de la {{ domxref("DOMStringMap") }} avec les règles suivantes :

- - - -

La transformation opposée, qui associe un nom d'attribut à une clef, utilise les règles suivantes :

- - - -

La restriction dans les règles ci-dessus garantit que les deux transformations sont bien l'inverse l'une de l'autre.

- -

Par exemple, l'attribut nommé data-abc-def correspond à la clef abcDef.

- -

Syntaxe

- -
chaîne = element.dataset.nomEnCamelCase;
-element.dataset.nomEnCamelCase = chaîne;
- -

Exemples

- -
<div id="utilisateur" data-id="1234567890" data-utilisateur="Monsieur Tartempion" data-date-de-naissance>Monsieur Tartempion
-</div>
-
-var el = document.querySelector('#utilisateur');
-
-// el.id == 'utilisateur'
-// el.dataset.id === '1234567890'
-// el.dataset.utilisateur === 'Monsieur Tartempion'
-// el.dataset.dateDeNaissance === ''
-
-el.dataset.dateDeNaissance = '1960-10-03'; // renseigne la date de naissance.
-
-// 'unAttributDeDonnees' in el.dataset === false
-
-el.dataset.unAttributDeDonnees = 'mes données';
-// 'unAttributDeDonnees' in el.dataset === true
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané (snapshot), {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Instantané de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName('HTML WHATWG')}}, définition initiale.
- -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/focus/index.html b/files/fr/web/api/htmlelement/focus/index.html deleted file mode 100644 index 3659a5a75b..0000000000 --- a/files/fr/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

La méthode HTMLElement.focus() donne le focus à l'élément spécifié, s'il peut prendre le focus.

- -

Syntaxe

- -
element.focus();
-element.focus(focusOption); // Paramètre objet
- -

Paramètres

- -
-
focusOptions {{optional_inline}} {{experimental_inline}}
-
Est un objet ayant les propriétés suivantes:
-
-
-
preventScroll {{optional_inline}}
-
Est une valeur Boolean: -
    -
  • Si false, la méthode fera défiler la page pour que l'élément soit visible à l'écran.
    • -
  • Si true,  la méthode ne fera PAS défiler la page pour que l'élément soit visible à l'écran.
    • -
-
-
-
-
- -

Exemples

- -

Donner le focus à un champ texte

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Champ texte.">
-<p></p>
-<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au champ texte!</button>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

Donner le focus à un bouton

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
- -

HTML

- -
<button type="button" id="myButton">Cliquez!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">Cliquez-moi pour donner le focus au bouton!</button>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- -

Focus avec option

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">Cliquez-moi pour donner le focus au bouton!</button>
-<button type="button" onclick="focusNoScrollMethod()">Cliquez-moi pour donner le focus au bouton sans défilement!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">Cliquez!</button>
-</div>
- -

Résultat

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

Spécification

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

Notes

- -

Si vous appelez HTMLElement.focus() à partir d'un gestionnaire d'événement mousedown, vous devez appeler event.preventDefault() pour empêcher le focus de quitter l'HTMLElement.

- -

Compatibilité des navigateurs

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéChromeFirefoxEdgeInternet ExplorerOperaSafari (WebKit)
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FonctionnalitéAndroid WebviewChrome for AndroidFirefox MobileEdge mobileIE mobileOpera AndroidSafari iOS
Support basique{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
focusOptions{{CompatChrome(64)}}{{CompatChrome(64)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatOperaMobile(51)}}{{CompatNo}}
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/htmlelement/innertext/index.html b/files/fr/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..6b9d530411 --- /dev/null +++ b/files/fr/web/api/htmlelement/innertext/index.html @@ -0,0 +1,42 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Sommaire

+ +

Node.innerText est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier.

+ +

{{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux.

+ +

Spécification

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduction basée sur le brouillon de spécification de innerText. Voir whatwg/html#465 et whatwg/compat#5 pour l’histoire.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.Node.innerText")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/api/htmlelement/style/index.html b/files/fr/web/api/htmlelement/style/index.html deleted file mode 100644 index 85a19bb89a..0000000000 --- a/files/fr/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: HTMLElement.style -slug: Web/API/HTMLElement/style -tags: - - DOM - - Style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -

{{ APIRef("HTML DOM") }}

- -

Résumé

- -

Renvoie un objet représentant l'attribut style de l'élément.

- -

Exemple

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25cm";
-
- -

Notes

- -

Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle est utile pour définir un style pour un élément particulier.

- -

Cependant, elle n'est pas utile pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou des feuilles de style externes.

- -

Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, vous devriez plutôt utiliser window.getComputedStyle.

- -

Consultez la liste des propriétés CSS DOM pour une liste des propriétés CSS accessibles depuis le DOM. Vous y trouverez quelques notes supplémentaires concernant l'utilisation de la propriété style pour styler des éléments dans le DOM.

- -

Il est généralement préférable d'utiliser la propriété style plutôt que elt.setAttribute('style', '...') depuis un script, étant donné que l'utilisation de la propriété style n'écrasera pas les autres propriétés CSS qui peuvent avoir été spécifiées dans l'attribut style.

- -

Spécification

- - - -

Compatibilité des navigateurs

- - - -

{{Compat("api.HTMLElement.style")}}

- -

Voir aussi

- - - -

Lien Externe

- - - -

{{ languages( { "en": "en/DOM/element.style", "ja": "ja/DOM/element.style", "pl": "pl/DOM/element.style" } ) }}

diff --git a/files/fr/web/api/htmlelement/tabindex/index.html b/files/fr/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index b2dd8ca956..0000000000 --- a/files/fr/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex -tags: - - Référence_du_DOM_Gecko -translation_of: Web/API/HTMLOrForeignElement/tabIndex ---- -

{{ ApiRef() }}

-

Résumé

-

Obtient ou définit l'ordre de tabulation de l'élément courant.

-

Syntaxe

-
element.tabIndex = iIndex;
-
-

Paramètres

- -

Exemple

-
b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-
-

Spécification

- diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.html b/files/fr/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..0c45cd871c --- /dev/null +++ b/files/fr/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,192 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - DOM + - Event + - TransitionEvent + - Transitions CSS + - Transitions CSS3 + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +
{{APIRef}}
+ +

L'événement transitionend est déclenché lorsqu'une transition CSS est terminée. Dans le cas où une transition est supprimée avant la fin, par exemple si {{cssxref ("transition-property")}} est supprimé ou {{cssxref ("display")}} est défini sur none, alors l'événement ne pourra pas être généré.

+ + + + + + + + + + + + + + + + + + + + +
BullesOui
AnnulableOui
Interface{{domxref("TransitionEvent")}}
Propriété de gestionnaire d'événements{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
+ +

L'événement transitionend est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché.  Si l'événement transitioncancel est déclenché, l'événement transitionend ne se déclenchera pas.

+ +

Propriétés

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriétésTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe 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 transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}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).
+ +

Examples

+ +

This code gets an element that has a transition defined and adds a listener to the transitionend event:

+ +
const transition = document.querySelector('.transition');
+
+transition.addEventListener('transitionend', () => {
+  console.log('Transition ended');
+});
+ +

The same, but using the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}:

+ +
const transition = document.querySelector('.transition');
+
+transition.ontransitionend = () => {
+  console.log('Transition ended');
+};
+ +

Live example

+ +

In the following example, we have a simple {{htmlelement("div")}} element, styled with a transition that includes a delay:

+ +
<div class="transition">Hover over me</div>
+<div class="message"></div>
+ +
.transition {
+  width: 100px;
+  height: 100px;
+  background: rgba(255,0,0,1);
+  transition-property: transform background;
+  transition-duration: 2s;
+  transition-delay: 1s;
+}
+
+.transition:hover {
+  transform: rotate(90deg);
+  background: rgba(255,0,0,0);
+}
+ +

To this, we'll add some JavaScript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire. In this example, to cancel the transition, stop hovering over the transitioning box before the transition ends. For the transition end event to fire, stay hovered over the transition until the transition ends.

+ +
const message = document.querySelector('.message');
+const el = document.querySelector('.transition');
+
+el.addEventListener('transitionrun', function() {
+  message.textContent = 'transitionrun fired';
+});
+
+el.addEventListener('transitionstart', function() {
+  message.textContent = 'transitionstart fired';
+});
+
+el.addEventListener('transitioncancel', function() {
+  message.textContent = 'transitioncancel fired';
+});
+
+el.addEventListener('transitionend', function() {
+  message.textContent = 'transitionend fired';
+});
+
+ +

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

+ +

The transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

+ +

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

+ +

If the transitioncancel event is fired, the transitionend event will not fire.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("api.HTMLElement.transitionend_event")}}

+ +

Voir également

+ + -- cgit v1.2.3-54-g00ecf