Comment puis-je déclencher des fonctions de rappel une fois les animations CSS3 terminées ?

Les animations CSS3 peuvent-elles déclencher des fonctions de rappel ?

Contrairement aux animations JavaScript, les animations CSS3 ne fournissent pas intrinsèquement un mécanisme direct pour exécuter une fonction de rappel lors de achèvement. Cependant, il existe une solution qui consiste à utiliser des écouteurs d'événements.

Implémentation à l'aide de frameworks JavaScript

Par exemple, avec jQuery, vous pouvez attacher un écouteur d'événements pour capturer l'achèvement événement et invoquer une fonction de rappel :

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

Implémentation à l'aide de Pure JavaScript

Si vous préférez travailler avec du JavaScript pur, l'extrait de code suivant montre comment ajouter des écouteurs d'événement pour différents événements de fin d'animation :

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

Considérations

Gardez à l'esprit que la prise en charge par le navigateur des événements d'animation CSS3 varie. Les noms d'événements utilisés dans les extraits de code ci-dessus couvrent un large éventail de navigateurs, garantissant ainsi la compatibilité.

Démo

Pour une démonstration en direct, visitez ce JSFiddle : 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!