一键式如何从单个元素添加和删除类

Question

I'm trying to trigger a complete CSS3 animation with a single click on an anchor element. My current version is working (based on lots of searching here and on Google), but it requires two clickable elements to be present.

Here's what I have so far:

http://codepen.io/ProfessorSamoff/pen/rVNOdv

As you'll see, the jQuery is pretty typical:

$('a.puff').click(function() {
    $('a.puff').addClass('active');
    $(this).removeClass('active');
});

I know that I'm probably missing something pretty simple, so any help is appreciated.

Thanks, Tim

Answer 1

CSS alone doesn't provide a mechanism to act on a keyframe animation/transition end, however it does fire a javascript-detectible event, as explained here .

Your repeatable puff animation will look like this :

$('a.puff').each(function() {
    $(this).attr('data-puff', $(this).text());
}).on('click', function() {
    var $a = $(this).addClass('active').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() {
        $a.removeClass('active');
    });
});

As far as I'm aware this is as simple as you can make it.

Updated codepen

Answer 2

$(document).ready(function() {
   $('.puff').each(function() {
      $(this).attr('data-puff', $(this).text());
   });
   $('a.puff').click(function() {
      var $this = $(this);
      $this.addClass('active');
      setTimeout(function(){ $this.removeClass('active'); }, 150);
   });
});