Javascript 引导动画不';I don’我没有按预期工作

Javascript 引导动画不';I don’我没有按预期工作,javascript,jquery,twitter-bootstrap,animation,twitter-bootstrap-4,Javascript,Jquery,Twitter Bootstrap,Animation,Twitter Bootstrap 4,您可以找到引导动画。我想在动画完成后删除它。在网站上,你可以找到一个触发器,这应该有助于解决这个问题。 问题是,当我单击该按钮时,类会立即被删除 <button class="btn btn-primary" onclick="foo(this)">Press here</button> <script> function foo(element){ $(element).addClass("animated shake"); $(elemen

您可以找到引导动画。我想在动画完成后删除它。在网站上,你可以找到一个触发器,这应该有助于解决这个问题。 问题是,当我单击该按钮时,类会立即被删除

<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>
按这里
函数foo(元素){
$(元素).addClass(“动画震动”);
$(元素).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd OAAnimationEnd animationend',$(元素).removeClass(“动画抖动”);
}

只需为动画持续时间添加一个超时,以等待动画完成:

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

你在你的网站上包括了
mdbootstrap.js
吗?我使用了这个模板。如果没有监听器,动画就会工作。所以我认为模板的创建者已经包括了这一点。这很好用!但我必须搜索或尝试动画需要完成的时间。有什么方法可以使用他们提供的监听器吗?我想你可以通过
动画持续时间
css样式获得动画时间。我在回答中加了这个。