Comment puis-je détecter la fin d'une transition CSS ?

Rappel sur la transition CSS

Question :

Est-il possible de recevoir une notification lorsque une transition CSS a terminé ?

Réponse :

Oui, si pris en charge par le navigateur, un événement est déclenché à la fin de la transition. Cependant, l'événement spécifique varie selon les navigateurs :

• Navigateurs Webkit (Chrome, Safari) : webkitTransitionEnd
• Firefox : transitionend
• IE9 : msTransitionEnd
• Opéra : oTransitionEnd

Considérations supplémentaires :

• webkitTransitionEnd peut ne pas toujours se déclencher, surtout si l'animation n'a aucun effet sur l'élément.
• Un délai d'attente de secours est recommandé pour garantir que le gestionnaire d'événements est appelé au cas où l'événement ne se déclencherait pas comme attendu.

Exemple de code :

const transitionEndEventName = "XXX"; // Determine the appropriate event name
const elemToAnimate = ...; // Element to animate
let done = false;
const transitionEnded = () => {
  done = true;
  // Transition finished actions
  elemToAnimate.removeEventListener(transitionEndEventName, transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName, transitionEnded, false);

// Trigger animation

setTimeout(() => {
  if (!done) {
    console.log("Timeout required to call transition ended.");
    transitionEnded();
  }
}, XXX); // Replace XXX with animation duration plus a grace period

Remarque :

• La fin de l'événement de transition Le nom peut être obtenu en utilisant la méthode décrite dans la réponse à « Comment normaliser les fonctions de transition CSS3 dans les navigateurs ? »
• Ce problème est également lié aux "événements de transition CSS3."

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!