Bootstrap 崩溃有一个跳跃的过渡

Posted 2023-03-24

【中文标题】Bootstrap 崩溃有一个跳跃的过渡

【英文标题】：Bootstrap collapse has a jumpy transition

【发布时间】：2016-12-15 21:05:34

【问题描述】：

我对引导导航栏的转换有疑问。 当折叠元素有填充时，折叠有一个跳跃的过渡

我用谷歌搜索了这个问题，似乎问题在于填充：

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

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

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

如果没有这个奇怪的问题，我怎样才能获得相同的结果？

任何帮助、建议或建议？

【问题讨论】：

Mattia，你愿意跟进这个问题吗？我看到你有很多未解决的问题。被遗弃的帖子很难看。 Take the tour

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

【讨论】：

如果内部容器有一些 margin-top 或 margin-bottom 值，过渡也会跳跃。

【参考方案2】：

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

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

【参考方案3】：

尝试为受影响的项目添加 CSS 过渡。这将减少过渡跳跃，因为浏览器将在各种填充之间进行动画处理。您可以使用自己的计时属性来定位每个 CSS 动画属性。您可以在此处查看所有各种动画属性：http://www.w3schools.com/cs-s-ref/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;