css - 如何收听 Bootstrap 动画的结尾

Question

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

在页面的顶部，我有一个固定的导航栏，其中会显示一个“展开菜单”按钮，以防视口(viewport)太紧。这个按钮通过动画(我认为是 CSS3 动画)发挥了它的魔力，我对此很满意，但我想在每次动画完成时(打开动画和关闭动画)做更多的事情(用 jquery 切换类)一)。我在考虑一个 javascript 监听器(最好通过 jquery .on 函数定义它)，但我真的不知道我应该听什么事件!有什么想法吗？

更新我喜欢通过在我想控制的对象上监听这个事件几乎可以很好地完成工作:

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

唯一的问题是它把那个对象上的 Bootstrap 动画弄乱了:它第一次工作，但当我想关闭展开的导航栏时，什么也没有发生(似乎我的听众覆盖了 Bootstrap 动画。很奇怪，呵呵？)

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");
});