Tiago Tiago - 6 months ago 13
jQuery Question

jQuery + Animate.css animation only working once, animation not resetting

I'm trying to reproduce a specific animation each time a button is pressed.

Specifically, I'm using

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

The animation does work correctly, but only once. Why is this?

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

I want the animation to reset every time I click the button, even if it is halfway through completion from a previous click. It should also work whenever I click the button, not only 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

See http://css-tricks.com/restart-css-animation/, which discusses this exact problem.

I think the cleanest solution is to wrap the functionality of removing the element and re-inserting it in the same position in the HTML tree in a global function. Then, when you want to restart an animation, you just remove the class, call the reset function (grabbing the newly-inserted element from the return value), and then add the animation class(es) back to start the animation again.

For example:

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, since the old in-progress animation is automatically ended when the animating element is destroyed, and the newly-inserted element's animation begins immediately.

Comments