CSS動畫使用Jquery添加類和刪除類

Question

我有一個關於使用CSS動畫添加和刪除類的問題。

我已經從codepen.io創建了這個DEMO

在此演示中，您可以看到有六個回合div。 也有一個鏈接（ 單擊此處 ）。

如果單擊“單擊此處”按鈕，則可以看到CSS動畫。 所以我想添加一個jQuery代碼。 像第一個一樣，六個回合的div display:none; 當您單擊“ 單擊此處”按鈕時，將以動畫方式打開六個回合div，但只有一次。 之后，當您再次單擊時，請單擊此處按鈕，然后六個回合div會隨着CSS動畫自動刪除。

有人可以在這里幫助我嗎？

Answer 1

首先，您需要刪除.circle的以下行

-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;

然后，您可以使用Mouser和sareed的代碼：

$(document).ready(function() {
     var circle = $('.circle');
     $(".note a").click(function(e) {
      e.preventDefault();
     $('.wrap').css('display', 'block');

        if (circle.hasClass('bounceInUp')) {
         circle.removeClass('bounceInUp').addClass('bounceOutDown');
          }
           else 
          {
         $('.circle').addClass('animated bounceOutDown');
         circle.removeClass('bounceOutDown').addClass('bounceInUp');
           }
      });
  });

我希望這能幫到您。

Answer 2

$(document).ready(function() {
  $('.wrap').css('display', 'none'); 
  $(".note a").click(function(e) {
    e.preventDefault();

     $('.wrap').css('display', 'block'); 
     $('.circle').addClass('animated bounceInUp');
     $(this).parent('.note a').removeClass('.circle bounceInUp');
     $(".note a").off('click');   //remove click handler.      

     //Adding the new click handler
     $(".note a").click(function(e) {
        e.preventDefault();

        $('.circle').addClass('animated bounceOutDown');
        $(this).parent('.note a').removeClass('.circle animated bounceOutDown');
        $(".note a").off('click');  //remove click handler again.
     });
  });
});

將第二個單擊處理程序添加到按鈕

Answer 3

檢查是否存在添加的類，如果存在，則刪除/執行動畫。 簽出hasClass（）;

編輯：在您的處理程序中添加與此類似的內容：

var circle = $('.circle');
if (circle.hasClass('bounceInUp')) {
  circle.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
$('.circle').addClass('animated bounceOutDown');
  circle.removeClass('bounceOutDown').addClass('bounceInUp');
}

codepen