Eu tenho um projecto em que importei animate.css
para que as transições fossem mais engraçadas, porém uma delas só me ocorre uma vez.
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>
Como é possivel ver no código acima, a animação só é feita uma vez e eu queria que substitui-se um p
por outro quantas vezes eu clicasse no button