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

问题描述

与 http://twitter.github.com/bootstrap 一样，

$

---

img src =https://i.stack.imgur.com/GvSpb.pngalt =enter image description here>

上图是截图

在 TOP-RIGHT-CORNER ，有一个三线菜单按钮。

解决方案

Bootstrap完成响应导航栏的过渡动画，与使用CSS3过渡的任何崩溃一样。要关闭只有导航栏的转换（保留任何其他转换），您只需要覆盖CSS。

我建议添加一个类，例如 no-transition （但名称可以是任意的）您的可折叠容器

 < div class =nav-collapse no-transition> 
  

，然后定义一个CSS规则，禁用Bootstrap定义的CSS3转换在 bootstrap.css之后解析）

：

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

但是不要停在那里！ Bootstrap JavaScript是硬编码的，假设如果浏览器支持转换，则会发生转换。如果你只是做上面的改变，你会发现可折叠对象锁定一个打开/关闭周期后，因为它仍然在等待浏览器的转换结束事件触发。有两种不太理想的方法来解决此问题：

第一个选项： hack bootstrap-collapse.js不等待过渡结束事件。与Bootstrap的混乱从来不是一个好主意，因为它会使未来的更新为你的痛苦。这种特殊的解决方法也需要类似地应用于任何其他你希望赋予无转换类的Bootstrap JavaScript组件。

bootstrap-collapse.js ：107

  this。$ element.hasClass（'no-transition'）|| （this.transitioning = 1）; 
  

第二，推荐，选项使用超短转换时间禁用转换。这不会根据您的要求删除过渡动画，但它实现类似的结果，可能没有显着负面影响您的低功耗移动设备的性能。这种方法的好处是你不需要破解任何Bootstrap JS文件，和你可以应用 no-transition 到任何元素，

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

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转换动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！