Bootstrap折叠功能转换不流畅

Question

我在bootstrap导航栏的过渡中遇到了问题。当折叠元素有填充时，它会出现跳动的过渡。

我通过谷歌搜索发现，问题似乎出在填充上：

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

事实上，如果我从menu-menu-container元素中移除padding，动画效果就可以很好地工作，并且非常流畅。 这是我的codepen链接：http://codepen.io/mp1985/pen/EyOJYE 如何在不出现这个奇怪问题的情况下实现相同的结果？

- mattia

---

Mattia，你能跟进一下这个问题吗？我看到你有很多未解决的问题。放弃的帖子很丑陋。参观导览。 - isherwood

Answer 1

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

示例：

HTML

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

CSS

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

如果你将padding移至内部容器，这个问题就会得到解决：

HTML

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

- Jorge Díaz

---

如果内部容器具有一些margin-top或margin-bottom值，转换也会出现突跳。 - Aryo

Answer 2

由于导航栏折叠类的最大高度为340px，发生了这种情况。使用下面的代码来处理它。

http://codepen.io/rahulchaturvedie/pen/VjVOLa

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

- Rahul

Answer 3

尝试为受影响的项目添加CSS过渡效果。这样做可以使过渡更加平滑，因为浏览器会在各种内边距之间进行动画效果。您可以使用各自的时间属性来针对每个可动画的CSS属性。您可以在此处查看所有可动画的属性：http://www.w3schools.com/cssref/css_animatable.asp 您可能希望将此选择器更具针对性和意义。

* {
  transition: all 0.3s;
}

- EricL