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…

Accepted Answer

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

how to listen to the end of a bootstrap animation

Solution

Problem