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

Événements de transition CSS3

Les transitions CSS3 offrent un moyen transparent d'ajouter des animations et des effets à vos pages Web. Cependant, pour contrôler et synchroniser efficacement ces animations, il est essentiel de savoir quand elles commencent et se terminent. Entrez les événements de transition CSS3.

Types d'événements

Selon le navigateur que vous utilisez, différents événements sont déclenchés lorsqu'une transition CSS3 démarre ou se termine :

• Brouillon de transitions CSS W3C :

  • début de transition (début)
  • fin de transition (fin)

• Webkit :

  • webkitTransitionFin (fin)

• Mozilla :

  • fin de transition (fin)

• Opéra :

  • oTransitionEnd (fin)

• Internet Explorer :

  • fin de transition (fin)

Écoute des événements

Pour écouter les événements de transition CSS3, vous pouvez utiliser des écouteurs d'événements JavaScript :

element.addEventListener('transitionend', function(event) {
  // Transition completed
});

Compatibilité des navigateurs

La disponibilité des événements de transition CSS3 varie selon les navigateurs. Reportez-vous au tableau ci-dessous pour obtenir des informations sur la compatibilité :

Exemple d'utilisation

Le code suivant montre comment utiliser transitionend pour écouter la fin d'une transition CSS3 :

<div>

Lorsque vous survolez l'élément #box, la transition animera la largeur à 200 px en douceur. L'événement transitionend sera déclenché une fois la transition terminée.

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!