Dropdown Bootstrap shown and hidden event not wait for CSS Transition

Question

Dropdown javascript in Bootstrap 3 have 2 event are shown.bs.dropdown and hidden.bs.dropdown and their description:

shown.bs.dropdown : This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).

hidden.bs.dropdown : This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).

And this is my demo: DEMO

But shown event alway trigger after show event and not wait for CSS transition or wait for the dropdown has been made visible to the user. Hidden event too. What's happen? Does it is bug? Or I went wrong something?

Answer 1

Maybe the porblem occurs because of the loading position of bootstrap.js. You could try if it solves your problem if you load the bootstrap.js at the end of the body-section. See also the loading of jQuery and Bootstrap