Comment puis-je exécuter une fonction de rappel une fois une animation CSS3 terminée ?

Rappel d'achèvement d'animation CSS3

Dans le domaine du développement Web, les animations jouent un rôle crucial dans l'amélioration de l'expérience utilisateur. Les animations CSS3, en particulier, offrent un moyen puissant et flexible de créer des effets visuels dynamiques. Cependant, une question courante qui se pose est : peut-on exécuter une fonction de rappel lorsqu'une animation CSS3 se termine ?

La réponse

Oui, il est en effet possible d'implémenter une fonction de rappel pour les animations CSS3. Ce rappel agit comme un événement que vous pouvez intercepter en ajoutant un écouteur d'événement. Voici comment y parvenir :

En utilisant jQuery :

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

En utilisant du JavaScript pur :

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

En ajoutant un écouteur d'événement à l'événement d'animation spécifique (la fin de l'animation), vous pouvez exécuter une fonction de rappel qui sera déclenchée lorsque le l'animation est terminée.

Considérations :

Il est important de noter que différents navigateurs peuvent utiliser des préfixes spécifiques au fournisseur pour l'événement d'animation. Pour garantir la compatibilité entre les navigateurs, il est recommandé d'inclure les trois préfixes.

Exemple de démonstration :

Une démonstration en direct de la fonction de rappel en action est disponible sur : http https://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!