Les animations CSS3 peuvent-elles déclencher des rappels ?

Les animations CSS3 peuvent-elles déclencher des rappels ?

Contrairement aux animations JavaScript qui prennent facilement en charge les rappels, les animations CSS3 manquaient initialement de cette fonctionnalité. Cependant, grâce à l'utilisation d'écouteurs d'événements, il est désormais possible d'implémenter des rappels pour les animations CSS3.

Implémentation de rappels basés sur les événements

La clé pour réaliser des rappels en CSS3 est de reconnaître les animations comme des événements pouvant être écoutés. En ajoutant des écouteurs d'événements aux éléments DOM pertinents, vous pouvez exécuter des rappels une fois l'animation terminée.

Liaisons d'événements jQuery

À l'aide de jQuery, vous pouvez lier un écouteur d'événements à l'élément animé comme suit :

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

Cela lie l'écouteur d'événement à trois types d'événements possibles : oanimationend, animationend et webkitAnimationEnd. L'événement initial est préfixé par le fournisseur pour garantir la compatibilité avec différents navigateurs.

Liaison d'événement JavaScript pur

Si vous préférez ne pas utiliser jQuery, vous pouvez utiliser du JavaScript pur pour ajouter des écouteurs d'événements :

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

Cette approche permet d'obtenir le même résultat mais avec du JavaScript natif code.

Démo et compatibilité avec le navigateur

Une démonstration en direct de cette implémentation de rappel est disponible sur http://jsfiddle.net/W3y7h/. Notez que même si la plupart des navigateurs modernes prennent en charge ces types d'événements, il est toujours conseillé de vérifier la compatibilité entre navigateurs lors de l'implémentation des rappels.

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!