CSS-анимация добавить класс и удалить класс с помощью JQuery

Question

У меня есть один вопрос о добавлении и удалении класса с использованием анимации css.

Я создал этот DEMO от codepen.io

В этой демонстрации вы можете увидеть там шесть круглых дел. Также есть одна ссылка (Нажмите здесь).

Если вы нажмете кнопку «Нажмите здесь», вы увидите анимацию CSS. Поэтому я хочу добавить код jquery. Как сначала шесть круглых div display:none;, когда вы нажимаете Нажмите здесь кнопка, затем шесть круглых div, открытых с анимацией, но только один раз. после этого, когда вы нажмете еще раз Нажмите здесь кнопка, затем шесть раундов div автоматически удаляются с анимацией css.

Кто-нибудь может мне помочь?

Answer 1

Прежде всего, вам нужно сделать, чтобы удалить следующую строку в пределах .circle

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

Тогда вы можете использовать Mouser 's и sareed' S код:

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

Edit: Добавить что-то похожее на это в обработчике:

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

codepen