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

CSS动画使用Jquery添加类和删除类

3 个答案: