Y a-t-il un rappel à la fin d'une animation CSS3?


91

Existe-t-il un moyen d'implémenter une fonction de rappel en cas d'animation css3? En cas d'animation Javascript, c'est possible mais ne trouvant aucun moyen de le faire en css3.

Une façon que j'ai pu voir est d'exécuter le rappel après la durée de l'animation, mais cela ne garantit pas qu'il sera toujours appelé juste après la fin de l'animation. Cela dépendra de la file d'attente de l'interface utilisateur du navigateur. Je veux une méthode plus robuste. Un indice?


duplication possible de Callback sur la transition CSS
givanse

si vous voulez faire une action CSS simple, par exemple, cacher l'élément après sa transition, peut-être que vous n'avez pas besoin d'un rappel et à la place, vous pouvez résoudre votre problème avec l'image clé de l'animation.
Madmadi

Réponses:


130

Oui il y a. Le rappel est un événement, vous devez donc ajouter un écouteur d'événements pour l'attraper. Voici un exemple avec jQuery:

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

Ou pur js:

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

Démo en direct: http://jsfiddle.net/W3y7h/


3
Pour IE10, c'est «MSAnimationEnd» (voir msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )
Martin Wittemann

6
Ça ne l'est transitionendpas animationend.

13
@MichaelJones non, c'est pour les transitions css3. la question portait sur les animations.
joshvermaire

4
@MartinWittemann IE10 final utilise désormais animationend msdn.microsoft.com/en-us/library/ie/… . @Husky le code fonctionne dans Chrome et FF 14, voir le violon mis à jour jsfiddle.net/W3y7h
methodofaction

1
Duplicata de stackoverflow.com/questions/9255279/… qui a une solution plus complète
vanthome

3

Un moyen simple pour vous de faire un rappel qui gère également vos transitions CSS3 / compatibilités de navigateur serait le plugin jQuery Transit . Exemple:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

Démo JS Fiddle


1
Point bonus pour le partage des spécifications de l'API avec jQuery animate, tout en profitant de la fluidité du rendu matériel des animations CSS. Nous venons de remplacer jQuery animate à peu près partout avec cela.
logan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.