Animation jQuery + Animate.css works only once, the animation is not reset

Question

I try to play a specific animation every time I click a button.

In particular, I use the jQuery library and animate.css for this effect: when I click the button, a class is added (two classes, to be precise: fadeInDown animated ), to the element that I want to animate.

Animation works correctly, but only once. Why is this?

Fiddle: http://jsfiddle.net/jqm4vjLj/2/

I want the animation to be reset every time I click the button, even if it is halfway to completion from the previous click. It should also work when I press a button, not just once.

JS:

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

Classes from animate.css:

 @-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; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 

Answer 1

See http://css-tricks.com/restart-css-animation/ for a discussion of this exact issue.

I think the cleanest solution is to wrap the functionality of deleting an element and reinserting it at the same position in the HTML tree in a global function. Then, when you want to restart the animation, you simply delete the class, call the reset function (grab the newly inserted element from the return value), and then add the animation class back to start the animation again.

For instance:

 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/

This solution provides maximum responsiveness, as the old animation automatically ends when the animating element is destroyed, and the newly inserted animation of the elements starts immediately.

Answer 2

A safer approach would be to use an animation end event like

 $("#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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="button"></div> 

Answer 3

You need to remove the class after the animation is complete,

but directly using removeClass does not work because it will not allow the animation to complete, use setTimeout instead

see this http://jsfiddle.net/jqm4vjLj/4/

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

Answer 4

The problem is that it immediately deletes the class and then adds the class, so I just added a new div with the identifier button2, and on his click just deleted the class, and then clicked the div button again, which he animated.

so you need to do this after the animation is complete.

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

the fiddle is here: http://jsfiddle.net/jqm4vjLj/5/

Answer 5

maybe this is a good solution for your problem:

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

In your javascript, the .animation and .fadeInDown were added to #button , after which you had these classes and you could not add them again.

Answer 6

A simple solution for me is to start the reflow process before adding the class. You can do this, for example, by “changing” the width of the element. I think the fusion process is faster for the browser and then node. And its easier in terms of coding. In jQuery:

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

Answer 7

This works for me, from animate.css github:

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