How to make animation occur several times
I have a project in which I imported animate.css
so that the transitions were funnier, but one of them only occurs to me once.
var check = true;
$(document).ready(function(){
$(".p2").hide();
$("button").click(function(){
if(check){
$(".p1").show().removeClass().addClass("animated flipOutX").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$(this).removeClass().hide();
$(".p2").show().addClass("animated flipInX");
});
} else {
$(".p2").show().removeClass().addClass("animated flipOutX").on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function(e) {
$(this).removeClass().hide();
$(".p1").show().addClass("animated flipInX");
});
}
check = !check;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>
<button class="btnFlip">Click</button>
As you can see in the code above, the animation is only done once and I wanted one p
to be replaced by another as many times as I clicked on button
1
Author: Bruno Gibellino, 2017-09-29
1 answers
On daneden GitHub teaches you how to do this using jQuery.
Example:
$.fn.extend({
animateCss: function(animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
return this;
}
});
/*
setInterval(function() {
$('.p1').animateCss('bounce');
$('.p2').animateCss('pulse');
}, 3000);
*/
$(".p2").addClass('hide');
$(".btnFlip").click(function () {
$('.p1').toggleClass('hide').animateCss('flipOutX');
$('.p2').toggleClass('hide').animateCss('flipInX');
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<p class="p1">Click me away!</p>
<p class="p2">Click me too!</p>
<br>
<button class="btnFlip">Click</button>
You can create a jQuery function to simplify the whole process, in this example animateCss()
gets the name of the effect as a parameter. Inside the function it waits for all the animation to finish to remove the properties of the same and thus run again.
You can also set a setInterval()
to trigger the Times animation Once Upon a time.
3
Author: Gabriel Rodrigues, 2017-09-29 11:53:52