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

我有一个带有保存和重置按钮的表单。我在表单顶部有一个按钮图标。当用户单击“保存”按钮时，我试图使按钮图标反弹。我不想使用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>

拯救
重置

---

那么，每当单击save按钮时，如何触发bounce css属性呢？请帮帮我。：）

从元素中删除

.button

类，并在用户单击按钮时添加该类：

var-button=document.querySelector（“按钮”）；
button.onclick=函数（）{
var secondButton=document.querySelector（“第二个按钮”）；
secondButton.classList.remove（“bounce”）；
secondButton.offsetWidth=secondButton.offsetWidth；
secondButton.classList.add（“bounce”）；
};
.bounce{
位置：相对位置；
-webkit动画：弹跳1s5；
}
@-webkit关键帧反弹{
0% {
底部：5px；
}
25%,
75% {
底部：15px；
}
50% {
底部：20px；
}
100% {
底部：0；
}
}
点击我！
现在点击我单击按钮时必须添加类。通过在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秒）


答案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
类被删除，1分钟后再次添加。在第二部分中，
$（“.container list”）
也包含
按钮，但这只是因为HTML有点不同

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

答案2的功劳归于@AnthonyGrist
 单击按钮时添加类？是的，但是如果我添加类，当用户第二次单击“保存”按钮时，反弹效果不会出现，对吗？不要添加类，而是在单击按钮时切换类。我使用了jQuery UI反弹功能，我喜欢它。它真的很容易使用。但这完全弄乱了我的CSS。这方面有成千上万的例子：你在做同样的按钮在点击时反弹。我想要一个不同的按钮反弹时，按钮被点击。类似于“当你点击按钮A时，按钮B会反弹”。@ShellZero我为你更新了我的答案。这是怎么回事？这只是第一次起作用。但是谢谢你的提示。javascript的第3行似乎有错误。@ShellZero我解决了这两个问题并更新了我的答案。这就是你一直在寻找的还是我误解了你？这与仅仅调用
.toggleClass（）
（这不起作用，只有每隔一次单击才会导致反弹）有什么不同？哦，等等，我忘了一块@花农主义者再次彻底改变了它。这不是最漂亮的，但它是一个解决方案：）你可以切换操作顺序，并使用非常小的延迟，就像这样：这样，每次单击都可以工作（尽管重新启动动画）。@ShellZero我将其添加到我的答案中，并感谢Anthony提出了操作切换：）