如何听一个bootstrap动画的结束

Question

我正在开发一个使用bootstrap及其响应式JS + CSS的网站.

在页面的顶部,我有一个固定的导航栏,其中显示"展开菜单"按钮,以防视口太紧.这个按钮通过动画(我认为是一个CSS3)实现了它的魔力并且我很满意它,但每次动画结束时我都想做更多的事情(用jquery切换类)(打开动画和关闭)一).我正在考虑一个javascript监听器(更好的是通过jquery .on函数定义它),但我真的不知道应该听哪个事件!有任何想法吗？

更新 我喜欢通过在对象上听这个事件我想要控制几乎完成这项工作:

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

唯一的问题是它在该对象上混淆了引导动画:第一次它起作用,但是我想关闭扩展的导航栏,没有任何反应(似乎我的听众覆盖了引导程序.非常奇怪,是吧？)

Answer 1

如果你使用bootstrap和转换(css3转换),你可以试试这个:

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

$ .support.transition.end包含以下事件之一: webkitTransitionEnd, transitionend, oTransitionEnd otransitionend, transitionend.

但是如果你使用css3动画(css3动画名称和关键帧),你可以试试这个:

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

Answer 2

jQuery 内置了一个动画监听器： http: //docs.jquery.com/Selectors/animated

例子：if( $(foo).is(':animated') ) {...}

然后，如果一个元素是 !animated，您就可以应用您想要的任何逻辑。