CSS 关闭 Twitter Bootstrap Navbar Transition 动画

Turning off Twitter Bootstrap Navbar Transition animation

提问by jwchang

Just like http://twitter.github.com/bootstrap,

就像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.

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

回答by Andy Zarzycki

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.

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

I'd suggest adding a class, such as no-transition(but the name can be arbitrary) to your collapsible container

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

<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 afterbootstrap.css):

然后定义一个 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;
}

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:

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

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-transitionclass.

第一个选项：hack bootstrap-collapse.js 不等待转换结束事件。使用 Bootstrap 从来都不是一个好主意，因为它会让未来的更新成为你的痛苦。这种特殊的变通方法也需要类似地应用于您希望将no-transition类传递到的任何其他 Bootstrap JavaScript 组件。

bootstrap-collapse.js:107

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, andyou can apply no-transitionto any element, not just a collapse!

第二个推荐选项：使用超短过渡时间而不是禁用过渡。这并没有完全消除您所要求的过渡动画，但它实现了类似的结果，并且可能不会对低功率移动设备的性能产生明显的负面影响。上攻这种方法的是，你没有砍任何引导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;
}

回答by iscaler

Bootstrap adds collapsing class during the animation, so it has to be overwritten.

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;

}

回答by Steven Maude

A simple, non-CSS methodto disable the animation using jQuery is:

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

$.support.transition = false

回答by Alexandre Prazeres

Add it on a custom css file just after calling bootstrap.css

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

}

回答by Gabriel

Of course, transitioning height even for a very short period will still trigger paint, thus the browser will have to do work that will most likely dip the frame rate to 30 or so. Editing the bootstrap files also isn't ideal, because of added update complications.

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

If this is still something that you'd like to do to your site, the good news is that the current bootstrap version doesn't seem to have transitions for navbar anymore. http://getbootstrap.com/components/#navbar

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

回答by 000

By this code below you will get the navbar default open. The trick is setting height of div with class containerand nav-collapseto auto. If you also want the three-lined menu button to be totally inactive then remove data-toggle="collapse"from the below code.

通过下面的这段代码，您将打开导航栏默认值。诀窍是使用 classcontainer和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>