javascript - Animate.css 摇动效果每次都不起作用

Question

我正在制作一个 Twitch Streamer 应用程序，它使用 Twitch API 为一组预定的流媒体提取一些数据。

我有三个按钮可以选择所有/在线/离线 channel ，我希望为所有这些按钮添加动画摇动效果。

在我的第一次尝试中，我进行了简单的 if/else 检查以使 shake 正常工作 - 检测 animated shake 类是否已经存在，如果存在的话，将其删除，然后再次添加。否则，只需添加它。

那没用。我在 SO 上找到了一个答案，它说它不会那样工作，因为 addClass 和 removeClass 发生得太快以至于 DOM 没有时间 catch 。

然后，在 removeClass -

之后引起轻微延迟后，我使用带有匿名函数的 queue 将类添加回来

if ($(this).hasClass("animated shake")) {
            $(this).removeClass("animated shake").delay(50).queue(
                function() {
                    $(this).addClass("animated shake");
                });
            //$(this).addClass("animated shake");
        } else {
            $(this).addClass("animated shake");
        }

现在，抖动效果在 90% 的情况下都有效，但如果您一直在在线/离线 channel 之间来回切换，就会出现抖动不起作用的情况。

这是 Codepen 上的应用程序.

对于为什么它不能每次提供任何帮助，我将不胜感激。

注意 - 抖动效果目前仅适用于在线/离线按钮。

Answer 1

这每次都有效:-D

function shakeButton($button) {
    console.log('Shaking button')
    $button.removeClass("animated shake");
    setTimeout(
      function() {
        $button.addClass("animated shake");
      },
      25
    );
  }

  $('button').click(function() {
    shakeButton($(this));
  });

<!-- Never mind, Just some Dummy html... -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Never mind this, Just some Dummy Results</h4>
<h3>Check out the JS instead</h3>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

我只是使用了 setTimeout 而不是 .delay() 并且效果很好 :-)

干得好，你的代码很好，文档也很好 :-D 还有一些事情......

1. 在您的代码中...您在三个地方重复相同的代码，相反，您可以使用该代码创建一个函数并在所有地方调用该函数 ;-) 这将使调试更容易。
2. 您使用的 if 语句不是必需的...每次只需删除 animate 和 shake 类(它不会抛出任何错误 ;-) ) 并在一段时间后再次添加它们，这将使代码更简单。

此代码在此代码段中实现... http://codepen.io/shramee/pen/EyZJjN