css - how to listen to the end of a bootstrap animation

Question

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

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

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?)

Answer 1

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

$.support.transition.end contains one of these events: webkitTransitionEnd, transitionend, oTransitionEnd otransitionend, transitionend.

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