如何实现按钮每次点击都触发animate.css动画而非每两次点击一次？

嘿，我来帮你搞定这个问题！你遇到的“每两次点击才触发一次动画”的情况，根源在于toggleClass的逻辑——它是切换类的存在状态：第一次点击添加animated wobble触发动画，第二次点击移除这两个类（自然没动画），第三次点击才会再次添加类触发动画，所以看起来就是每两次点击才动一次。

另外先提个小错误：你的代码里e.preventdefault拼写错了，应该是e.preventDefault()（注意大写D，还要加括号调用方法），这个会影响默认行为的阻止，得先修正。

下面给你两个靠谱的解决方案，任选其一都能实现“每次点击都触发动画”：

方案1：利用延迟重置动画类 #

思路是每次点击先移除动画类，再短暂延迟后重新添加，让浏览器检测到类的变化从而触发动画：

$("#Bouncebtn").click(function(e) {
    e.preventDefault(); // 修正拼写和调用方式
    var $button = $(this);
    // 先移除动画类
    $button.removeClass('animated wobble');
    // 延迟10ms再添加类，确保浏览器处理完移除操作
    setTimeout(function() {
        $button.addClass('animated wobble');
    }, 10);
});

方案2：监听动画结束事件自动移除类 #

这个方案更优雅，动画结束后自动把类去掉，下次点击时类不存在，添加后就会重新触发动画：

$("#Bouncebtn").click(function(e) {
    e.preventDefault();
    $(this).addClass('animated wobble');
});

// 监听动画结束的事件（兼容不同浏览器前缀）
$("#Bouncebtn").on('animationend webkitAnimationEnd oAnimationEnd', function() {
    $(this).removeClass('animated wobble');
});

两种方案的核心都是确保每次点击时，animated wobble类是从“不存在”变为“存在”——因为Animate.css的动画只在类被添加的瞬间触发，只要保证每次点击都能完成这个“添加”动作，就能实现每次点击都动起来啦。

内容的提问来源于stack exchange，提问作者user9402741