需要弹跳一个图标/按钮没有jQuery UI

Need to bounce an icon/button without jQuery UI

本文关键字：按钮 图标 UI jQuery 一个      更新时间：2023-09-26

我有一个带有保存和重置按钮的表单。在表单的顶部有一个按钮图标。我试图使按钮图标反弹时，用户单击保存按钮。我不想使用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属性，每当保存按钮被点击?请帮帮我。:)

必须在单击按钮时添加类。通过在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秒后删除它(因为我在小提琴中的动画是1秒长)。

JSFIDDLE

回答2

根据Anthony Grist的建议，你可以把操作翻转过来，这样每一次点击都能让它工作。

解决方案可以在这里找到，jQuery看起来像这样:

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

在此代码中，.bounce类被删除，并在1ms后再次添加。在第二小提琴$('.container-list')包含button，以及，但这只是因为HTML是有点不同。

您应该选择答案二的原因是它可以一次又一次地被触发，而不必等待先删除类。

感谢@AnthonyGrist!

从元素中移除.button类，并在用户单击按钮时添加它:

var button = document.querySelector("button");
button.onclick = function() {
  var secondButton = document.querySelector("#second-button");
  secondButton.classList.remove("bounce");
  secondButton.offsetWidth = secondButton .offsetWidth;
  secondButton.classList.add("bounce");
};
 .bounce {
   position: relative;
   -webkit-animation: bounce 1s 5;
 }
 @-webkit-keyframes bounce {
   0% {
     bottom: 5px;
   }
   25%,
   75% {
     bottom: 15px;
   }
   50% {
     bottom: 20px;
   }
   100% {
     bottom: 0;
   }
 }
<button>Click Me!</button>
<button id="second-button">Now Click Me!</button>

你会注意到，如果你多次按下按钮，动画将不会重复。要解决这个问题，可以使用本文中的一种技术: 

var button = document.querySelector("button");
var secondButton = document.querySelector("#second-button")
button.onclick = function() {
  secondButton.classList.remove("bounce");
  secondButton.offsetWidth = secondButton .offsetWidth;
  secondButton.classList.add("bounce");
}

我更新了代码片段

相关文章：