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.
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.
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;
}