L’animation jQuery + Animate.css ne fonctionne qu’une fois, l’animation n’est pas réinitialisée.

Voir http://css-sortingcks.com/restart-css-animation/ , qui traite de ce problème précis.

Je pense que la solution la plus propre consiste à envelopper la fonctionnalité de suppression de l’élément et de réinsertion à la même position dans l’arborescence HTML dans une fonction globale. Ensuite, lorsque vous souhaitez redémarrer une animation, supprimez simplement la classe, appelez la fonction de réinitialisation (récupérant l’élément nouvellement inséré dans la valeur renvoyée), puis rajoutez la ou les classes d’animation pour relancer l’animation.

Par exemple:

 function reset($elem) { $elem.before($elem.clone(true)); var $newElem = $elem.prev(); $elem.remove(); return $newElem; } // end reset() $("#button").click(function () { var $this = $(this); $this.removeClass(); $this = reset($this); $this.addClass("fadeInDown animated"); }); 

http://jsfiddle.net/jqm4vjLj/6/

Cette solution offre une réactivité maximale, car l’ancienne animation en cours est automatiquement terminée lorsque l’élément animé est détruit, et l’animation de l’élément nouvellement inséré commence immédiatement.

Une approche beaucoup plus sûre consiste à utiliser l’événement de fin d’animation comme

 $("#button").click(function() { $("#button").addClass("fadeInDown animated").one('animationend webkitAnimationEnd oAnimationEnd', function() { $("#button").removeClass(); }); }); 

 #button { height: 30px; width: 120px; border: 1px solid black; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } 

Vous devez supprimer la classe une fois l’animation terminée,

mais en utilisant directement removeClass ne fonctionnera pas, car il ne laissera pas l’animation complète, utilisez plutôt setTimeout

voir ceci http://jsfiddle.net/jqm4vjLj/4/

  $("#button").click(function () { $("#button").addClass("fadeInDown animated"); setTimeout(function(){ $("#button").removeClass("fadeInDown animated");},100) }); 

La solution simple pour moi est de commencer le processus de refusion avant d’append la classe. Vous pouvez le faire par exemple en “changeant” la largeur de l’élément. Je pense que le processus de refusion est plus rapide pour le navigateur, puis la réinsertion du noeud. Et c’est plus simple en termes de codage. Dans jQuery:

 $(this) .removeClass('myAnimation') .width('auto') // the magic .addClass('myAnimation') 

Le problème est-il immédiatement supprimer la classe et ensuite append la classe afin que je viens d’append nouvelle div avec button2 id et sur son clic il suffit de supprimer la classe et puis cliquez à nouveau sur le bouton div cela animerait.

donc le problème est que vous devez le faire après avoir terminé l’animation

 $("#button1").click(function () { $("#button").removeClass(); }); 

le violon est ici: http://jsfiddle.net/jqm4vjLj/5/

c’est peut-être une bonne solution à votre problème:

https://jsfiddle.net/d2c16fk7/3/

Dans votre javascript, les classes .animation et .fadeInDown ont été ajoutées au #button , après quoi vous avez eu ces classes et vous ne pouviez plus les append.

Cela fonctionne pour moi, depuis le github animate.css:

 animateCss: function (animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; $(this).addClass('animated ' + animationName).one(animationEnd, function() { $(this).removeClass('animated ' + animationName); }); }