Animate.css 抖动效果不是每次都有效

Question

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

我有三个 select all/online/offline 频道的按钮，我希望为所有这些按钮添加 animated shake 效果。

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

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

然后我使用带有匿名函数的 queue 在 removeClass -

之后引起轻微延迟后将 class 添加回来

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% 的情况下都能正常工作，但如果您一直在 online/offline 个频道之间来回切换，就会出现抖动不起作用的情况。

这是 Codepen 上的应用程序。

对于为什么它每次都不起作用的任何帮助，我将不胜感激。

注意 - 抖动效果目前仅在 online/offline 按钮上。

Answer 1

你能试试这样的吗？

$('.btn').on('click', function()
{
    // Siblings will target other buttons but not the current one
    $(this).addClass('animated shake').siblings().removeClass('animated shake');
});

[编辑] 与您的结构更相关：

根据您的示例结构，为了方便起见，您可以将 class 添加到按钮包装器中，例如 .btnWrapper 并执行：

$('.btn').on('click', function()
{
    var clicked = $(this);
    clicked.addClass('animated shake').parents('.btnWrapper').siblings().find('.shake').removeClass('animated shake');
})

Answer 2

每次都有效:-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 不过还有一些事情...

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

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

Animate.css 抖动效果不是每次都有效

Animate.css shake effect not working every time

javascript

css

jquery

animate.css