Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

L’événement transitionend est émis quand une transition CSS s’est terminée. Dans le cas où une transition est supprimée avant d’être terminée, parce que par exemple la propriété transition-property est supprimée ou que la propriété display est définie à la valeur "none", l’événement n’est pas émis.

Information générale

Spécification
CSS Transitions
Interface
TransitionEvent
Propagation
Oui
Annulable
Oui
Cible
Element, Document, Window
Action par défaut
undefined
 

Propriétés

Propriété Type Description
target Lecture seule EventTarget La cible de l’évènement (la plus haute dans l’arbre DOM)
type Lecture seule DOMString Le type de l’évènement
bubbles Lecture seule Boolean Si l’évènement bouillonne par défaut ou non
cancelable Lecture seule Boolean Si l’évènement est annulable ou non
propertyNameLecture seule DOMString The name of the CSS property associated with the transition.
elapsedTimeLecture seule Float 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 transition-delay.
pseudoElementLecture seule 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).

Exemple

Cet exemple définit un gestionnaire d’événement pour détecter l’événement transitionend afin de changer le texte affiché dans l’élément « element » une fois la transition terminée.

let element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
  element.innerHTML = "Done!";
}, false);

Spécifications

Spécification Statut Commentaire
CSS Transitions
La définition de 'transitionend' dans cette spécification.
Version de travail Définition initiale.

Compatibilité avec les navigateurs

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0[1]
36
(Oui) 4.0 (2.0) 10 10.5[2]
12
12.10
23
3.2[1]
7.0.6
  
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support de base 2.1 (Oui) 4.0 (2.0) ? 10[2]
12
12.10
3.2[1]

[1] Implémenté dans Chrome 1.0, Android 2.1 et WebKit 3.2 en tant que webkitTransitionEnd. Chrome 36 et WebKit 7.0.6 utilisent le standard transitionend.

[2] Implémenté en tant que oTransitionEnd à partir d’Opera 10.5, en tant que otransitionend à partir de la version 12 et selon le standard transitionend à partir de la version 12.10.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : dominiquevilain
 Dernière mise à jour par : dominiquevilain,