javascript - Bootstrap 动画未按预期工作

Question

您可以找到 Bootstrap 动画here 。我想在动画完成后删除它。在网站上，您可以找到一个应该对此有所帮助的触发器。 问题是，当我单击按钮时，类会立即被删除。

<button class="btn btn-primary" onclick="foo(this)">Press here</button>
<script>
function foo(element){
    $(element).addClass("animated shake");
    $(element).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', $(element).removeClass("animated shake"));
    }
</script>

Answer 1

只需在动画持续时间内添加一个超时，等待动画完成:

function foo(element){
    $(element).addClass("animated shake");
    var duration = $(element).css("animation-duration"); 
    setTimeout(function() { 
        $(element).removeClass("animated shake"); 
    }, duration);
}