37

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

我现在工作的网站是响应式的。

我想删除过渡动画

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

在此处输入图像描述

上图是我要问的截图。

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

4

6 回答 6

84

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 组件。

引导-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;
}
于 2012-12-11T22:58:46.840 回答
13

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;

}
于 2014-11-19T19:52:29.517 回答
8

使用 jQuery 禁用动画的一种简单的非 CSS 方法是：

$.support.transition = false
于 2015-05-02T22:07:12.540 回答
7

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

}
于 2015-10-18T06:27:28.957 回答
2

当然，即使在很短的时间内转换高度仍然会触发绘制，因此浏览器必须做一些工作，很可能会将帧速率降低到 30 左右。编辑引导文件也不理想，因为增加了更新的复杂性。

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

于 2015-04-10T11:36:51.117 回答
0

通过下面的代码，您将获得默认打开的导航栏。container诀窍是用 class和nav-collapseto设置 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>
于 2012-10-29T17:26:50.297 回答