关闭 Twitter Bootstrap Navbar Transition 动画 [英] Turning off Twitter Bootstrap Navbar Transition animation

问题描述

就像:107

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

推荐的第二个选项:使用超短的过渡时间而不是禁用过渡.这并没有完全消除您所要求的过渡动画，但它实现了类似的结果，并且可能不会对低功率移动设备的性能产生明显的负面影响.这种方法的好处是您不必破解任何 Bootstrap JS 文件，并且您可以将 no-transition 应用于任何元素，而不仅仅是崩溃！

.no-transition {-webkit-transition:高度 0.01s；-moz-transition: 高度 0.01s;-ms-transition:高度 0.01s；-o-transition: 高度 0.01s;过渡:高度0.01s；}

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.

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

这篇关于关闭 Twitter Bootstrap Navbar Transition 动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！