关闭 Twitter Bootstrap 导航栏转换动画

Posted 2023-03-06

【中文标题】关闭 Twitter Bootstrap 导航栏转换动画

【英文标题】：Turning off Twitter Bootstrap Navbar Transition animation

【发布时间】：2012-10-18 15:58:48

【问题描述】：

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

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

我想删除过渡动画

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

---

上图是我要问的截图。

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

【问题讨论】：

如果你可以为你想说的话创建一​​个 jsfiddle 会更好..引导链接甚至没有显示三行菜单按钮..

尝试缩小浏览器的宽度，你会看到三行菜单按钮

好的。。所以现在你问的是当我们点击这三行或其他东西时发生的向下滚动效果......？？

【参考方案1】：

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

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;

【讨论】：

为了让第二个选项起作用，我不得不将过渡时间改为 0.01 秒。看来 IE 10 将 0.001s 舍入到零什么的，可折叠对象仍然锁定。

PhantomJS 似乎也是如此，0.01 有效，0.001 无效。 （我正在寻找一种关闭动画以加快硒测试的方法）

用 0.01s 更新了答案。

对于第二个选项，它似乎只在第一次显示时起作用。当元素再次隐藏然后重新显示时，它似乎忽略了无过渡特定。

第二个选项很棒，因为它摆脱了再次折叠时跳跃的 1px。 @David我没有发现这种情况。它的工作次数与我尝试的次数一样多。

【参考方案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;

【参考方案3】：

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

$.support.transition = false

【参考方案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;

【参考方案5】：

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

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

【讨论】：

你说得对，但是 bootstrap 仍然有那个烦人的过渡。

【参考方案6】：

通过下面的代码，您将默认打开导航栏。诀窍是将具有类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>

【讨论】：

根本没有解决我的问题，但它从打开菜单开始。这是唯一的区别。

你想删除过渡动画..所以当它默认打开时没有动画..对..??另外..我个人觉得它应该默认打开，因为新手用户可能不知道他/她必须点击三行菜单按钮..

问题是..在某些移动设备上的过渡效果是沉闷而缓慢的:(所以我只想摆脱它

@InspiredJW 你有没有得到这个？引导程序中的响应式导航栏很糟糕。在很多情况下也会导致闪烁。