关闭Twitter Bootstrap Navbar Transition动画

Question

就像http://twitter.github.com/bootstrap，

我现在正在处理的网站是响应式的。

我想删除过渡动画

单击折叠的导航栏菜单按钮。

---

上面的图片是我要问的截图。

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

Answer 1

Bootstrap以与使用CSS3过渡的任何折叠相同的方式完成响应式导航栏的过渡动画。要仅关闭导航栏的转换（保留任何其他转换），您只需要覆盖CSS。

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

<div class="nav-collapse no-transition">

然后定义一个CSS规则，该规则将禁用Bootstrap定义的CSS3转换（确保在 bootstrap.css之后解析你的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永远不是一个好主意，因为它会让你的未来更新变得痛苦。这种特殊的解决方法也需要类似地应用于您希望赋予no-transition类的任何其他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;
}

Answer 2

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;

}

Answer 3

使用jQuery禁用动画的simple, non-CSS method是：

$.support.transition = false

Answer 4

在调用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;

}

Answer 5

当然，即使在非常短的时间内过渡高度仍会触发油漆，因此浏览器必须做的工作最有可能将帧速率降低到30左右。编辑引导文件也不是理想的，因为增加了更新复杂性。

如果这仍然是您希望对您的网站做的事情，那么好消息是当前的bootstrap版本似乎不再具有导航栏的转换功能。 http://getbootstrap.com/components/#navbar

Answer 6

通过以下代码，您将获得导航栏默认打开。诀窍是将div的高度设置为container，将nav-collapse设置为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>