如何通过单击从单个元素中添加和删除 class ...

Question

我正在尝试通过单击锚元素来触发完整的 CSS3 动画。我当前的版本可以使用（基于此处和 Google 上的大量搜索），但它需要两个可点击的元素。

这是我目前的情况：

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

如您所见，jQuery 非常典型：

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

我知道我可能遗漏了一些非常简单的东西，因此非常感谢您的帮助。

谢谢，蒂姆

Answer 1

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

Answer 2

CSS 本身不提供作用于关键帧 animation/transition 结束的机制，但它确实会触发 javascript-可检测事件，如 here 所述.

您的可重复抽吸动画将如下所示：

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

据我所知，这很简单。

Updated codepen

如何通过单击从单个元素中添加和删除 class ...

How to add and remove a class from a single element with one click…

javascript

jquery

css

css-animations