Bootstrap: how to fix bootstrap responsive mobile menu open delay?

[athimannil]

At the first time the bootstrap responsive mobile menu open has a stuck in the middle of the page for a while then dropping down. And also rest of the time has a delay when menu dropping down, at the same time menu close works well without any delay.

I have tried with

.collapsing{
  height: 0 !important;
  opacity: 0;
}

but still open take delay when compare with closing

DEMO: http://codepen.io/anon/pen/MwMvmv

---

Question update

In the normal stage menu element seems like this

<div id="toggle-menu" aria-expanded="true" class="navbar-collapse collapse">

It toggle class collapse to collapsing and also calculate menu height add that height in to inline css style="height:250px;"

<div id="toggle-menu" aria-expanded="true" class="navbar-collapse collapsing" style="height:250px;">

after collapse completed inline css backed and class switch to collapse in"

 <div id="toggle-menu" aria-expanded="true" class="navbar-collapse collapse in" style="">

Actually I just need to bypass the collapsing and inline css of menu height

[patrickhlauke]

As this is not an issue with Bootstrap itself, but with the specific additional implementation you've got running on top of it, we recommend asking on StackOverflow - see https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#using-the-issue-tracker

[arajay]

This is a legit issue with bootstrap and not with a specific implementation. There needs to be a way to bypass, remove, or change the timing of the injected "collapsing" class. This class causes a delay when opening the menu as you have to wait for the "collapsing" class to resolve before the "show" class is applied.

[ajithmal]

.collapsing {
-webkit-transition: height .5s ease;
-o-transition: height .5s ease;
transition: height .5s ease;
}