javascript - 需要在没有 jQuery UI 的情况下弹出图标/按钮

Question

我有一个带有保存和重置按钮的表单。我在表单顶部有一个按钮图标。当用户单击保存按钮时，我试图使按钮图标弹跳。我不想使用 jQuery UI。我已经试过了，但我只想使用纯 CSS 和简单的 onclick javascript 函数来完成这项工作。

这是我使用的反弹 CSS:

 .bounce{
    position: relative;
    -webkit-animation: bounce 1s 5;
}

@-webkit-keyframes bounce{
    0%{
        bottom:5px;
    }
    25%, 75%{
        bottom: 15px;
    }

    50%{
        bottom: 20px;
    }
    100%{
        bottom: 0;
    }
}

Css 工作得很好，但显然它在加载页面时弹跳，因为我已将 class="bounce"添加到按钮图标。

<button class="container-list bounce" data-toggle="modal" data-target="#container-modal"><img src="images/container-rack.png"></button>

我有一个很长的表格，最后，我有如下按钮容器，其中有保存和重置按钮。

 <div class="container-buttons">
      <button class="btn btn-success" id="save_container" type="submit">Save</button>
   <button class="btn btn-warning" type="reset">Reset</button>
     </div>

那么，每当单击保存按钮时，如何触发反弹 css 属性？请帮我。 :)

Answer 1

您必须在单击按钮时添加类。通过在 1 秒后(或无论动画有多长)删除该类，您可以使用相同的按钮再次添加它。

现在，我没有看到你的 jQuery 或任何东西，所以我只是想在这里放一些通用的 jQuery:

$('#save_container').click(function () {
  var b = $('.container-list');
  b.addClass('bounce');
  setTimeout(function () {
      b.removeClass('bounce');;
  }, 1000);
});

当 #save_container 被点击时，.container-list 将获取类 .bounce 并在 1 秒后将其删除(因为我的 fiddle 中的动画长 1 秒)。

JSFIDDLE

答案 2

按照 Anthony Grist 的建议，您可以翻转操作，这样每次点击都能让它发挥作用。

可以在 this fiddle 中找到该解决方案jQuery 看起来像这样:

$('#save_container').click(function (e) {
    var b = $('button.container-list');
    b.removeClass('bounce');
    window.setTimeout(function() {
        b.addClass('bounce');
    }, 1);
});

在此代码中，.bounce 类被删除，1 毫秒后再次添加。在第二个 fiddle 中，$('.container-list') 也包含 button，但这只是因为 HTML 有点不同。

您应该选择答案二的原因是它可以反复触发，而无需等待类先被删除。

答案 2 归功于@AnthonyGrist!