Comment détecter le début et la fin des transitions CSS3 ?

Événements de transition CSS3

Lorsque vous travaillez avec des transitions CSS3, il est souvent utile de savoir quand une transition a commencé ou terminé. En CSS3, il existe divers événements déclenchés par des éléments pour indiquer ces transitions.

Événement de fin de transition CSS

Définition :
La fin de la transition L'événement est déclenché lorsqu'une transition CSS est terminée pour la propriété spécifiée.

Syntaxe :

element.addEventListener('transitionend', callbackFunction, { once: true });

Exemple :

const box = document.querySelector('.box');

box.addEventListener('transitionend', function(e) {
  console.log(`Transition for property ${e.propertyName} has ended.`);
}, { once: true });

Autres événements de transition

Au-delà de l'événement de fin de transition, certains navigateurs proposent également des événements supplémentaires :

Événements spécifiques au Webkit :

• webkitTransitionStart : Déclenché lorsqu'une transition CSS démarre.
• webkitTransitionRun : Déclenché plusieurs fois lors d'une transition CSS.

Événement spécifique à Mozilla :

• transitionstart : Déclenché lorsqu'une transition CSS sur une propriété démarre.

Événement spécifique à Opera :

• oTransitionStart : Déclenché lorsqu'une transition CSS sur une propriété démarre.

Internet Événement Explorer :

• MSTransitionEnd : Déclenché à la fin d'une transition CSS sur une propriété.

Compatibilité des navigateurs

Les événements ci-dessus sont pris en charge dans divers navigateurs selon les spécifications fournies dans le projet de transitions CSS du W3C et les documentations respectives des navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!