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

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?

javascript css frontend

— modifier
source

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/

— méthode d'action
source

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

— Martin Wittemann

Ça ne l'est transitionendpas animationend.

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

— joshvermaire

@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

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

— vanthome

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

— ROFLwTIME
source

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