Question

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

这是我到目前为止所拥有的：

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

正如您将看到的，jQuery非常典型：

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

我知道我可能错过了一些非常简单的东西，所以感谢任何帮助。

谢谢，添

Answer 1

单独的CSS并不提供一种机制来处理关键帧动画/过渡端，但它确实触发了一个可检测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

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

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

2 个答案: