我正在开发一个使用bootstrap及其响应式JS CSS的网站.
在页面的顶部,我有一个固定的导航栏,其中显示“展开菜单”按钮,以防视口太紧.这个按钮通过动画(我认为是一个CSS3)实现了它的魔力,我对它很满意,但每次动画结束时我都想做更多的事情(用jquery切换类)(开放动画和关闭)一).
我正在考虑一个javascript监听器(通过jquery .on函数定义它更好),但我真的不知道应该听哪个事件！
有任何想法吗？
UPDATE
我很喜欢通过在对象上听这个事件我想控制几乎完成这项工作：
$("#main-navbar .nav-collapse").on("transitionend",function(event){
console.log("end of the animation");
}
唯一的问题是它在该对象上混淆了引导动画：它第一次工作,但是我想关闭扩展的导航栏,没有任何反应(似乎我的监听器覆盖了引导程序.非常奇怪,是吧？)
解决方法
如果你使用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',function(event){
console.log("end of the animation");
});
