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

Property Type Description
target Lecture seule EventTarget The event target (the topmost target in the DOM tree).
type Lecture seule DOMString The type of event.
bubbles Lecture seule Boolean Whether the event normally bubbles or not.
cancelable Lecture seule Boolean Whether the event is cancellable or not.
propertyName Lecture seule DOMString The name of the CSS property associated with the transition.
elapsedTime Lecture 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.
pseudoElement Lecture 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

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

  
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 : fscholz, dominiquevilain
 Dernière mise à jour par : fscholz,