Turning off Twitter Bootstrap Navbar Transition animation

Question

Just like http://twitter.github.com/bootstrap,

The site what I working on now is responsive.

I would like to remove transition animation

when I click the collapsed navbar menu button.

---

Above picture is the screenshot of what I'm asking.

At TOP-RIGHT-CORNER, there is a three-lined menu button.

Solution 1

Bootstrap accomplishes the transition animation of the responsive nav bar the same way it does any collapse, which is using a CSS3 transition. To turn off the transition for only the navbar (leaving any other transitions in place), you simply have to override the CSS.

I'd suggest adding a class, such as no-transition (but the name can be arbitrary) to your collapsible container

<div class="nav-collapse no-transition">

and then defining a CSS rule that will disable the CSS3 transition that Bootstrap defined (make sure your CSS rule is parsed after bootstrap.css):

.no-transition {
  -webkit-transition: height 0;
  -moz-transition: height 0;
  -ms-transition: height 0;
  -o-transition: height 0;
  transition: height 0;
}

But, don't stop there! Bootstrap's JavaScript is hard-coded to assume that a transition WILL take place if transitions are supported by the browser. If you just make the change above, you'll find that the collapsible object "locks" after one open/close cycle, because it is still waiting for the browser's transition end event to fire. There are two less-than-ideal ways to work around this:

First option: hack bootstrap-collapse.js to not wait for the transition end event. Messing with Bootstrap is never a great idea because it'll make future updates a pain for you. This particular work-around would also need to be similarly applied to any other Bootstrap JavaScript component onto which you wish to impart the no-transition class.

bootstrap-collapse.js:107

      this.$element.hasClass('no-transition') || (this.transitioning = 1);

Second, recommended, option: use an ultra-short transition time instead of disabling the transition. This doesn't quite remove the transition animation as you asked, but it accomplishes a similar result with likely no noticable negative impact on the performance of your low-powered mobile devices. The upside of this method is that you don't have to hack any Bootstrap JS files, and you can apply no-transition to any element, not just a collapse!

.no-transition {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;
}

Solution 2

Bootstrap adds collapsing class during the animation, so it has to be overwritten.

.navbar-collapse.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}

Solution 3

A simple, non-CSS method to disable the animation using jQuery is:

$.support.transition = false

Solution 4

Add it on a custom css file just after calling bootstrap.css

.collapsing {
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;

}

Solution 5

Of course, transitioning height even for a very short period will still trigger paint, thus the browser will have to do work that will most likely dip the frame rate to 30 or so. Editing the bootstrap files also isn't ideal, because of added update complications.

If this is still something that you'd like to do to your site, the good news is that the current bootstrap version doesn't seem to have transitions for navbar anymore. http://getbootstrap.com/components/#navbar

View more solutions

Comments

[jwchang]

Did not solve my problem at all, but it starts with menu opened. That's the only difference.

[000]

you wanted to remove transition animation..so when it's opened default there's no animation..right..?? also..i personally feel that it should be default opened as a novice user might not be aware that he/she has to click on three-lined menu button..

[jwchang]

The issue is.. transition effect on some mobile devices is dull and slow :( So I just want to get rid of it

[Nariman]

@InspiredJW did you get anywhere with this? The responsive navbar in bootstrap is terrible. Causes flickering in a lot of cases too.

[Jim Hunziker]

To get the second option to work, I had to make the transition 0.01s instead. It seems that IE 10 rounds 0.001s down to zero or something, and the collapsible object still locks up.

[Dave]

PhantomJS seems to do the same, 0.01 works 0.001 doesn't. (I was after a way to turn off animations to speed up selenium testing)

[Andy Zarzycki]

Updated the answer with 0.01s.

[David]

For the second option, it only seems to work the first time it is displayed. When the element is hidden again and then redisplayed it seems to ignore the no-transition specific.

[Rachel S]

Second option is amazing because it gets rid of that 1px that jumps when collapsing it again. @David I didn't find that happening. It works as many times as I've tried it.

[Samia Ruponti]

you're right about the paint, but bootstrap still has that annoying transition.

[Uncle Iroh]

This works perfectly, I recommend 0.15 - the 0.01 is actually too fast (I know right, how can that be?) and looks choppy, you could also try 0.12 - thanks again @AndyZarzycki