css3 – 关闭Twitter Bootstrap Navbar Transition动画

前端之家收集整理的这篇文章主要介绍了css3 – 关闭Twitter Bootstrap Navbar Transition动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
就像 http://twitter.github.com/bootstrap

现在我正在做的工作是响应。

我想删除过渡动画

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

以上图片是我要求的截图。

在TOP-RIGHT-CORNER,有一个三排的菜单按钮。

解决方法

Bootstrap完成了响应式导航栏的转换动画,与使用CSS3转换的崩溃相同。要关闭只有导航栏的转换(留下任何其他转换),您只需要覆盖CSS。

我建议添加一个类,例如无转换(但名称可以是任意的)到您的可折叠容器

<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是硬编码的,假定如果浏览器支持转换,则会发生转换。如果您只是进行上述更改,您会发现可折叠对象在一个打开/关闭周期后“锁定”,因为它仍在等待浏览器的转移结束事件触发。有两种不太理想的方法解决这个问题:

第一个选项:hack bootstrap-collapse.js不等待转换结束事件。与Bootstrap进行交流从来不是一个好主意,因为它会使未来的更新对你而言是一种痛苦。这种特殊的解决方法也需要类似地应用于您希望传递无转换类的任何其他Bootstrap JavaScript组件。

bootstrap-collapse.js:107

this.$element.hasClass('no-transition') || (this.transitioning = 1);

第二,推荐选项:使用超短暂的转换时间,而不是禁用转换。这并不会像您所说的那样完全删除转换动画,但它实现了类似的结果,可能对您的低功耗移动设备的性能可能没有显着的负面影响。这种方法的优势在于您不必劫持任何Bootstrap 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;
}

猜你在找的CSS相关文章