CSS 动画添加 class 并删除 class 使用 Jquery

Question

我有一个关于使用 css 动画添加和删除 class 的问题。

我从 codepen.io

创建了这个 DEMO

在此演示中，您可以看到有六个回合 div。还有一个link（点击这里）。

如果单击“单击此处”按钮，则可以看到 CSS 动画。所以我想添加一个 jquery 代码。就像第一个 div 是 display:none; 当你点击 点击这里 按钮然后第六个回合 div 以动画打开但只有一次。之后当您再次单击 单击此处 按钮时，六轮 div 会自动删除 css 动画。

有人可以帮我吗？

Answer 1

$(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 2

检查添加的 class 是否存在，如果存在 remove/do 动画。查看 hasClass();

编辑： 在您的处理程序中添加类似的内容：

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

codepen

Answer 3

首先，您需要删除 .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');
           }
      });
  });

希望对您有所帮助。

CSS 动画添加 class 并删除 class 使用 Jquery

CSS animation add class and remove class using Jquery

javascript

css

jquery

animation