Css 关闭Twitter引导导航栏转换动画

就是

我现在工作的网站是响应性的

我想删除过渡动画

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

---

上图是我所问问题的截图

---

在右上角，有一个三行菜单按钮。

通过下面的代码，您将打开导航栏默认设置。诀窍是使用class

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>

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

我建议在可折叠容器中添加一个类，例如

no transition

（但名称可以是任意的）

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

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

第一个选项：破解bootstrap-collapse.js以不等待转换结束事件。搞乱引导从来都不是一个好主意，因为它会让将来的更新让你感到痛苦。这种特殊的解决方法还需要类似地应用于任何其他引导JavaScript组件，您希望将

no transition

类传递到这些组件上

：107

第二，推荐选项：使用超短过渡时间，而不是禁用过渡。这并没有完全按照您的要求删除过渡动画，但它可以实现类似的结果，并且可能不会对低功耗移动设备的性能产生明显的负面影响。这种方法的优点是，您不必破解任何引导JS文件，您可以对任何元素应用

无转换

，而不仅仅是折叠

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

---

引导会在动画期间添加正在折叠的类，因此必须将其覆盖

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

}

---

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

如果这仍然是您希望对站点执行的操作，那么好消息是当前的引导版本似乎不再有navbar的转换

使用jQuery禁用动画的方法是：

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

}

---

如果你能为你想说的内容创建一个JSFIDLE会更好引导链接甚至没有显示三行菜单按钮试着缩小浏览器的宽度，你会看到三行菜单按钮明白了现在你在问当我们点击这三行或三行菜单按钮时会发生什么样的向下滚动效果还有一件事……根本解决不了我的问题，但它是从打开菜单开始的。这是唯一的区别。您想删除过渡动画..所以当它打开时默认没有动画..对。。？？另外..我个人认为它应该默认打开，因为新手用户可能不知道他/她必须单击三行菜单按钮..问题是。。某些移动设备上的过渡效果既单调又缓慢：（所以我只想摆脱it@InspiredJW你有什么进展吗？引导中的响应导航栏很糟糕。在很多情况下也会导致闪烁。为了让第二个选项正常工作，我不得不转换为0.01秒。看起来IE将0.001秒降到了零或什么，可折叠对象仍然锁定。PhantomJS似乎也这么做了，0.01可以工作，0.001不行。（我在寻找一种关闭动画以加快硒测试的方法）将答案更新为0.01s。对于第二个选项，它似乎只有在第一次显示时才起作用。当元素再次隐藏然后重新显示时，它似乎忽略了“无转换”特定项。第二个选项令人惊讶，因为它消除了再次折叠时跳转的1px。@David我没有发现这种情况。它的工作原理是我已经试过很多次了。关于油漆你是对的，但是bootstrap仍然有那个恼人的过渡。

$.support.transition = false

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

}