[英]Bootstrap animation doesn't work as expected
You can find bootstrap animations here . 您可以在此处找到引导动画。 I want to remove the animation after it finished. 我要在完成动画后删除它。 On the website you can find a trigger which should help with that. 在网站上,您可以找到一个触发器,对此应该有所帮助。 The problem is, that when I click the button, the classes get deleted immediately. 问题是,当我单击按钮时,这些类会立即被删除。
<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>
Just add a Timeout for the duration of your animation, to wait until the animaton is finished: 只需在动画过程中添加一个超时,然后等待动画完成即可:
function foo(element){
$(element).addClass("animated shake");
var duration = $(element).css("animation-duration");
setTimeout(function() {
$(element).removeClass("animated shake");
}, duration);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.