Comment puis-je déclencher des fonctions de rappel avec des animations CSS3 ?

Utiliser des rappels pour les animations CSS3

Dans le domaine du développement Web, la question se pose : les animations CSS3 peuvent-elles déclencher des fonctions de rappel ? Bien que les animations JavaScript fournissent cette fonctionnalité, les homologues CSS3 ne disposent pas d'une telle prise en charge inhérente.

Pour contourner cette limitation, les animations CSS3 peuvent être couplées à des écouteurs d'événements, exploitant le fait que les animations sont essentiellement des événements eux-mêmes. En utilisant jQuery ou JavaScript pur, les développeurs peuvent s'abonner à ces événements et appeler des rappels désignés une fois leur achèvement :

jQuery :

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

JavaScript pur :

element.addEventListener("webkitAnimationEnd", callfunction, false);
element.addEventListener("animationend", callfunction, false);
element.addEventListener("oanimationend", callfunction, false);

Ces écouteurs d'événements peuvent être attachés à n'importe quel élément HTML animé. Lorsque l'animation atteint son point final, la fonction de rappel spécifiée sera exécutée :

Remarque : Différents navigateurs peuvent présenter des préfixes variés pour les noms des écouteurs d'événements. Les exemples fournis couvrent les préfixes courants, garantissant la compatibilité entre les principaux navigateurs.

Pour une démonstration en direct, visitez :

http://jsfiddle.net/W3y7h/

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!