就像http://twitter.github.com/bootstrap，
我现在工作的网站是响应式的。
我想删除过渡动画
当我单击折叠的导航栏菜单按钮时。
上图是我要问的截图。
在TOP-RIGHT-CORNER处，有一个三行菜单按钮。
【问题讨论】：
标签： css twitter-bootstrap css-transitions
Bootstrap 完成响应式导航栏的过渡动画的方式与折叠时相同，即使用 CSS3 过渡。要仅关闭导航栏的转换（保留任何其他转换），您只需覆盖 CSS。
我建议在您的可折叠容器中添加一个类，例如 no-transition（但名称可以是任意的）
<div class="nav-collapse no-transition">
然后定义一个 CSS 规则，该规则将禁用 Bootstrap 定义的 CSS3 过渡（确保您的 CSS 规则在 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 是硬编码的，它假定如果浏览器支持转换，就会发生转换。如果您只是进行上述更改，您会发现可折叠对象在一个打开/关闭周期后“锁定”，因为它仍在等待浏览器的转换结束事件触发。有两种不太理想的解决方法：
第一个选项：破解 bootstrap-collapse.js 以不等待过渡结束事件。乱用 Bootstrap 从来都不是一个好主意，因为它会让未来的更新对你来说很痛苦。这种特殊的解决方法也需要类似地应用于您希望向其传递 no-transition 类的任何其他 Bootstrap JavaScript 组件。
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;
}
【讨论】：
Bootstrap 在动画过程中添加了折叠类，所以它必须被覆盖。
.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;
}
【讨论】：
使用 jQuery 禁用动画的simple, non-CSS method 是：
$.support.transition = false
【讨论】：
在调用 bootstrap.css 后将其添加到自定义 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;
}
【讨论】：
当然，即使在很短的时间内转换高度仍然会触发绘制，因此浏览器必须做一些工作，很可能会将帧速率降低到 30 左右。编辑引导文件也不理想，因为增加了更新的复杂性。
如果这仍然是您想对您的网站做的事情，那么好消息是当前的引导程序版本似乎不再具有导航栏的转换功能。 http://getbootstrap.com/components/#navbar
【讨论】：
通过下面的代码，您将默认打开导航栏。诀窍是将具有类container 和nav-collapse 的div 的高度设置为auto。如果您还希望三行菜单按钮完全处于非活动状态，请从以下代码中删除 data-toggle="collapse"。
<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>
【讨论】：