如何听一听bootstrap动画的结束 [英] how to listen to the end of a bootstrap animation

问题描述

我正在使用引导程序及其响应的JS + CSS开发一个网站。

I'm developing a website using bootstrap and its responsive JS+CSS.

在页面的顶部，我有一个固定的导航栏， 按钮，以防视口太紧。这个按钮的魔术与一个动画（一个CSS3我想），我很高兴，但我想做一些事情（切换类与jquery）每次动画完成（开放动画和关闭一）。
我正在考虑一个javascript监听器（更好的是通过定义它感谢jquery .on函数），但我真的不知道什么事件我应该听！
任何想法？

At the top of the page I have a fixed navigation bar where an "expand menu" button is shown in case the viewport is too tight. This button does its magic with an animation (a CSS3 one I think) and I'm happy with it, but I would like to do something more (toggle classes with jquery) each time the animation finishes (both the open animation and the close one). I was thinking about a javascript listener (even better by defining it thanks to jquery .on function), but I really don't know what event I should listen to! Any ideas?

UPDATE
我听说过这个事件对象控制几乎可以正常工作：

UPDATE I've fond out that by listening to this event on the object I wanna control almost does the job well:

$("#main-navbar .nav-collapse").on("transitionend", function(event){    
    console.log("end of the animation");
}

b $ b

唯一的问题是，它把引导动画搞乱了对象：第一次它的工作，但我想关闭展开的navbar，没有任何反应（似乎我的监听器覆盖了引导的。 ）

the only problem is that it messes bootstrap animations up on that object: the first time it works, but wen I want to close the expanded navbar, nothing happens (it seems that my listener overrides the bootstrap ones. quite weird, huh?)

推荐答案

如果你使用引导和转换（css3 transition），你可以试试：

If you use bootstrap and transitions (css3 transition) you can try this:

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

$ b b

$。support.transition.end包含以下事件之一： webkitTransitionEnd，transitionend，oTransitionEnd otransitionend，transitionend。

但是如果你使用css3动画（css3动画名称和关键帧），你可以尝试这样：

But if you use css3 animation (css3 animation-name and keyframes) you can try this:

$("body").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

这篇关于如何听一听bootstrap动画的结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！