Maison > interface Web > tutoriel CSS > Comment puis-je déclencher des rappels à la fin de l'animation CSS3 ?

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

Barbara Streisand
Libérer: 2024-12-08 18:16:12
original
378 Les gens l'ont consulté

How Can I Trigger Callbacks on CSS3 Animation Completion?

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") 
});
Copier après la connexion

2. Utilisation de JavaScript pur :

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal