jquery - 每次点击应用动画，而不是每两次

Question

我正在使用Toggleclass jquery函数，它会在每次点击时切换动画摆动类。我如何在每次单击时为该按钮设置动画(而不是每两次单击)。 animate.css在 Github 上。

$("#Bouncebtn").click(
  function(e) {
    e.preventdefault
    $("#Bouncebtn").toggleClass('animated wobble');
  });

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="Bouncebtn" class="shake ">bounce</button>

Answer 1

您需要等待动画结束。因此，您可以收听 animationend :

$("#Bouncebtn").on('click', function (e) {
    e.preventDefault();
    $("#Bouncebtn").toggleClass('animated wobble');
}).on('animationend', function(e) {
    $("#Bouncebtn").toggleClass('animated wobble');
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="Bouncebtn" class="">bounce</button>