Bootstrap 崩溃有一个跳跃的过渡

Question

我对 bootstrap 导航栏的转换有疑问。当折叠元素有填充

时，折叠有一个跳动的过渡

我用谷歌搜索了这个问题，看来问题出在填充：

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

事实上，如果我从 menu-menu-container 元素中删除填充，动画效果很好，而且非常流畅

这是我的代码笔 > http://codepen.io/mp1985/pen/EyOJYE

如何在没有这个奇怪问题的情况下获得相同的结果？

有什么帮助、建议或忠告吗？

Answer 1

尝试添加 CSS 转换受影响的项目。这将使过渡更少跳跃，因为浏览器将在各种填充之间设置动画。您可以针对每个 CSS 动画属性具有自己的时间属性。您可以在此处查看所有各种动画属性：http://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful
* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

Answer 2

它的发生是因为 navbar-collapse class 的最大高度是 340px 使用下面的代码来处理它。 http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
}

Answer 3

问题 是由您折叠的容器的填充引起的 。它使高度的计算复杂化 collapse.js

示例：

HTML

    <div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

如果您将填充移动到内部容器，这将得到解决：

HTML

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>

Bootstrap 崩溃有一个跳跃的过渡

Bootstrap collapse has a jumpy transition

javascript

css

jquery

collapse

twitter-bootstrap