37

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.

enter image description here

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

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

jwchang
  • 10,584
  • 15
  • 58
  • 89
  • it would be better if you could create a jsfiddle for what you are trying to say..the bootstrap link doesn't show me even the three-lined menu button.. – 000 Oct 29 '12 at 14:26
  • Try to shrink your browser's width and you will see the three lined menu button – jwchang Oct 29 '12 at 14:28
  • ok got it..so now you are asking about the scroll down effect that takes place when we click on those three lines or something else..?? – 000 Oct 29 '12 at 14:30

6 Answers6

85

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;
}
Andy Zarzycki
  • 2,601
  • 19
  • 10
  • 6
    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. – Jim Hunziker Aug 09 '13 at 19:46
  • 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) – Dave Oct 06 '14 at 17:37
  • Updated the answer with 0.01s. – Andy Zarzycki Nov 11 '14 at 20:56
  • 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. – BeanFlicker Apr 03 '16 at 17:07
  • 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. – Rachel S Jul 06 '16 at 16:04
  • 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 – Uncle Iroh Sep 24 '16 at 20:18
13

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;

}
iscaler
  • 141
  • 1
  • 2
8

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

$.support.transition = false
Steven Maude
  • 856
  • 11
  • 21
7

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;

}
Alexandre Prazeres
  • 415
  • 1
  • 6
  • 12
2

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

Gabriel
  • 127
  • 1
  • 3
0

By this code below you will get the navbar default open. The trick is setting height of div with class container and nav-collapse to auto. If you also want the three-lined menu button to be totally inactive then remove data-toggle="collapse" from the below code.

 <div class="navbar">
    <div class="navbar-inner">
    <div class="container" style="height:auto">

    <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>

    <!-- Be sure to leave the brand out there if you want it shown -->
    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse" style="height:auto">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li><a href="#">Link 1</a></li>   
 <li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
    </ul>
    </div>

    </div>
    </div>
    </div>
000
  • 3,976
  • 4
  • 25
  • 39
  • Did not solve my problem at all, but it starts with menu opened. That's the only difference. – jwchang Oct 30 '12 at 07:20
  • 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.. – 000 Oct 30 '12 at 07:21
  • The issue is.. transition effect on some mobile devices is dull and slow :( So I just want to get rid of it – jwchang Oct 30 '12 at 09:35
  • @InspiredJW did you get anywhere with this? The responsive navbar in bootstrap is terrible. Causes flickering in a lot of cases too. – Nariman Dec 05 '12 at 16:57