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

【问题标题】：CSS animation add class and remove class using JqueryCSS动画使用Jquery添加类和删除类
【发布时间】：2015-01-07 09:11:12
【问题描述】：

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

我从 codepen.io 创建了这个 DEMO

在这个演示中，您可以看到有六个圆形 div。还有一个链接（点击这里）。

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

有人可以帮我吗？

【问题讨论】：

标签： javascript jquery css animation

【解决方案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');
           }
      });
  });

希望对你有所帮助。

【讨论】：

【解决方案2】：

检查添加的类是否存在，如果存在则删除/做动画。查看hasClass();

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

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

codepen

【讨论】：

感谢您的帮助。但我不想要这个。如果您阅读了我的问题，那么您可以理解我想要做什么。您的演示显示了六个圆形 div，但我想要在页面加载时六个圆形 div 然后那个六个圆形 div 不显示。因此，在页面加载后单击此处按钮，六个圆形 div 将打开并停止。同样，如果您单击“单击此处”按钮，则六个圆形 div 会自动向下播放 css 动画。
所有的作品都在那里。将display: none; 添加到您的CSS 中以获取.wrap 并使用$('.wrap').css('display', 'block');。你可以通过反复试验得到它。

【解决方案3】：

$(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.
     });
  });
});

为按钮添加第二次点击处理程序

【讨论】：

感谢您的帮助。但我不想要这个。如果您阅读了我的问题，那么您可以理解我想要做什么。您的演示显示了六个圆形 div，但我想要在页面加载时六个圆形 div 然后那个六个圆形 div 不显示。因此，在页面加载后单击此处按钮，六个圆形 div 将打开并停止。同样，如果您单击“单击此处”按钮，则六个圆形 div 会自动向下播放 css 动画。
@innovation 我添加了额外的功能。附言。你的英语很难听懂。对不起。