Comment puis-je déclencher des rappels à la fin de l'animation CSS3 ?

Rappels pour les animations CSS3

Les animations CSS3 offrent des effets d'animation impressionnants, mais manquent de flexibilité pour implémenter des rappels une fois terminés. Cet article explore une solution à ce problème en tirant parti des écouteurs d'événements.

Problème :

Comment pouvons-nous déclencher une fonction de rappel lorsqu'une animation CSS3 se termine ? Alors que les animations JavaScript prennent en charge les rappels, les animations CSS3 semblent manquer de fonctionnalités similaires.

Solution :

Bien que les animations CSS3 ne fournissent pas directement de mécanismes de rappel, elles émettent des événements qui peuvent être capturé à l’aide d’écouteurs d’événements. Cela nous permet d'exécuter des rappels lorsque ces événements se produisent. Voici deux méthodes :

1. Utilisation de jQuery :

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

2. Utilisation de JavaScript pur :

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

Ces écouteurs d'événements détectent la fin de l'animation et déclenchent la fonction de rappel spécifiée. Cela garantit que le rappel est exécuté de manière fiable une fois l'animation terminée.

Démo en direct :

Pour une démonstration pratique, reportez-vous au violon en direct sur http://jsfiddle. net/W3y7h/ pour assister à la fonctionnalité de rappel en action.

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!