Question

我遇到了bootstrap导航栏转换的问题。当折叠元素具有填充

时，折叠具有跳转过渡

我用Google搜索了这个问题，似乎问题是填充：

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

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

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

如果没有这个奇怪的问题，我怎样才能达到相同的效果？

任何帮助，建议或建议？

Answer 1

问题是由您正在折叠的容器的填充引起的。它使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>

Answer 2

它的发生是因为导航栏崩溃类的最大高度为340px，使用低于代码来处理它。 http://codepen.io/rahulchaturvedie/pen/VjVOLa

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

Answer 3

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

＆＃13;

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

＆＃13;

Bootstrap崩溃有一个跳跃的过渡

3 个答案: