1

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

1 Resposta 1

3

No Github do daneden ensina como fazer isso usando jQuery.

Exemplo:

$.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>

Você pode criar uma function do jQuery para simplificar todo o processo, nesta do exemplo animateCss() recebe o nome do efeito como parâmetro. Por dentro da function ela aguarda toda a animação acabar para remover as propriedades da mesma e assim rodar novamente.

Você pode definir também um setInterval() para disparar a animação de tempos em tempos.

2
  • Isso está a acontecer constatemente eu apenas quero que ao clicar no button faça o ´flipOutX´ de um ´p´ e o ´flipInX´ de outro ´p´, ou seja, desaparecer um ´p´ e aparecer outro no mesmo lugar. 29/09/2017 às 11:29
  • 1
    @BrunoGibellino editei a resposta confira o exemplo novamente, coloque este comentário na sua pergunta, por que se trata do objetivo da mesma, sempre tente criar perguntas da forma mais clara possível. 29/09/2017 às 11:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .