Est-il un rappel à l'issue d'un CSS3 animation?

Est-il possible de mettre en œuvre une fonction de rappel en cas de css3 animation? Dans le cas du Javascript, l'animation de son possible, mais de ne pas trouver un moyen de le faire en css3.

D'une façon que je pouvais voir, c'est d'exécuter de rappel après l'animation de la durée, mais qui n'est pas assurez-vous qu'il sera toujours appelée juste après la fin de l'animation. Il dépendra du navigateur de l'INTERFACE utilisateur de la file d'attente. Je veux une méthode plus solide. Aucune idée?

  • double possible de Rappel sur la transition CSS
  • si vous voulez faire simple CSS action, par exemple, masquer l'élément après sa transition, peut-être que vous n'avez pas besoin d'un rappel et au lieu de cela, vous pouvez résoudre votre problème avec l'animation de l'image clé.
InformationsquelleAutor alter | 2011-05-31
  1. 124

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

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

    Ou pure js:

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

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

    • Pour IE10, c'est "MSAnimationEnd" (voir msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations)
    • C'est transitionend, pas animationend.
    • non, c'est pour les transitions css3. la question était sur les animations.
    • Incroyable exactement ce que je cherchais pour l'homme.
    • La version jQuery ne fonctionne pas pour moi, à la fois Firefox et Chrome. La Vanille JS version fonctionne bien.
    • IE10 final utilise maintenant animationend msdn.microsoft.com/en-us/library/ie/.... @Husky le code fonctionne dans Chrome et FF 14, voir mise à jour de violon jsfiddle.net/W3y7h
    • Double de stackoverflow.com/questions/9255279/... qui a une solution plus complète
    • Il est intéressant de noter que l'événement est déclenché pour tous de l'élément enfant qui anime également (au moins dans Chrome). Je ne suis pas sûr au sujet d'un travail autour de cela, mais sachez que la liaison à un élément déclencheur de la fonction de rappel à chaque fois un autre élément imbriqué dans le principal élément de l'anime.
    • +1 pour l'ajout de pure js solution en plus de jQuery
    • est-il un moyen de détecter si animationend ou variantes sont pris en charge? A avoir un problème avec l'application de compatibilité du navigateur qui s'est avéré être un écouteur d'événement qui n'a jamais déclenché de sorte à les mettre dans un travail autour de le forcer à se produire, mais ne peut pas trouver un moyen de le détecter

    InformationsquelleAutor methodofaction
  2. 3

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

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

    JS Fiddle Démo

    • Point Bonus pour le partage de l'API spec avec jQuery animate, mais en prenant toujours le parti du matériel-rendu de la fluidité des animations CSS. Nous avons juste remplacé jQuery animate à peu près dans tous les endroits avec cette.
    InformationsquelleAutor ROFLwTIME