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工作得很好，但显然它在页面加载时反弹，因为我添加了类=＆＃34;反弹＆＃34;到按钮图标。

<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秒后将其删除（因为我的小提琴中的动画长度为1秒）。

JSFIDDLE

回答2

根据安东尼·格里斯特的建议，你可以翻转操作，然后用它来完成每次点击。

该解决方案可以在this fiddle中找到，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有点不同。

你应该回答两个问题的原因是它可以一遍又一遍地被触发，而你不必等待首先删除这个课程。

答案2的归功于@AnthonyGrist！

Answer 2

从元素中删除.button类，并在用户单击按钮时将其添加：

＆＃13;

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");
};

＆＃13;

 .bounce {
   position: relative;
   -webkit-animation: bounce 1s 5;
 }
 @-webkit-keyframes bounce {
   0% {
     bottom: 5px;
   }
   25%,
   75% {
     bottom: 15px;
   }
   50% {
     bottom: 20px;
   }
   100% {
     bottom: 0;
   }
 }

＆＃13;

<button>Click Me!</button>
<button id="second-button">Now Click Me!</button>

＆＃13;

~~您会注意到，如果多次按此按钮，动画将不会重复。要解决此问题，请使用此article中的一种技术：~~

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"); }

<击>

我更新了代码段。

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

2 个答案: