Twitter Bootstrap 100% 高度手风琴“跳跃”答案

【问题标题】：Twitter Bootstrap 100% height accordion "jump"Twitter Bootstrap 100% 高度手风琴“跳跃”
【发布时间】：2013-05-14 22:08:30
【问题描述】：

我正在尝试使用 Twitter Bootstrap 折叠组件实现 100% 高度的手风琴，正如 question 中所述。

我正在手动设置.accordion-inner 元素的高度，如answer 中所述。

但是，我在展开/折叠面板时遇到了“弹跳”行为。我已经从 .accordion-inner 元素中删除了所有填充/边距/边框以消除这种可能性。

在 IE10 中最明显，但在 Chrome 中也很明显。

看到这个example。

任何想法是什么导致了这种“跳跃”的行为？

【问题讨论】：

它适用于铬
我已经签入了 Chromium 并且底部的“反弹”仍然存在。
是的，你是对的，没有注意到它。但坏消息是在 boostrap 文档中也有一个“反弹”：查看twitter.github.io/bootstrap/javascript.html#collapse
是的，我明白你的意思。它并不常见，所以我没有注意到它，并认为这可能与我试图使其高度为 100% 有关。
请参阅stackoverflow.com/a/33697157/2208713 - 我尝试了为这个问题提供的所有解决方法答案，并发现这个答案实际上在另一个线程中有效。它归结为不直接填充扩展部分（例如面板主体），而是使用具有填充的容器 div

标签： html css twitter-bootstrap collapse

【解决方案1】：

聚会迟到了，但是：

我有一个类似的问题，并注意到如果我从折叠元素下方的元素中删除一个 margin-top，并用 padding-top 替换它，过渡是平滑的。

所以 - 检查相邻元素的边距，如果可能，尝试用填充替换它们。

【讨论】：

对我来说很相似，但它是 .collapse div 周围的边距。我有一个包含两个类的 div：.content 和 .collapse。 .content 有边距。我将这两个类分成两个单独的 div，.collapse 包装 .content

【解决方案2】：

我认为您看到的“跳跃”是由于 .collapse 类的 CSS 转换造成的。

如果您查看此 SO 线程 Turning off Twitter Bootstrap Navbar Transition animation，您可以了解如何使用覆盖 CSS 类“no-transition”来禁用转换。这不会同时停止动画，但会加快动画速度，从而使跳跃不那么明显......

将no-transition 添加到您的手风琴体元素中......

<div id="collapseOne" class="accordion-body collapse in no-transition">

添加 CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

更新了 plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview

【讨论】：

谢谢，但理想情况下我想保留动画（我不再看到）。你是说你认为这不可能吗？
您可以尝试通过增加过渡上的s 来减慢动画速度，但无论哪种方式我认为过渡都会导致“跳跃”
删除动画将“修复”问题，就像关闭某种警告将修复警告所警告的问题一样。不知道 272k 的用户是怎么回复这样的答案的……
@alexandernst 这是对 Bootstrap 2.x 的建议，近年来并不相关。感谢您抽出时间对我 7 年前的建议投反对票。

【解决方案3】：

HTML：

<td><a data-toggle="collapse" href="#text1" aria-expanded="false" aria-controls="#text1"</a>
<div class="collapse" id="text1" aria-expanded="true" style="padding-top:5px"><img src="..."></div>

CSS：

 .collapse.in{
    padding-bottom:5px;
 }

【讨论】：

【解决方案4】：

我遇到了这种奇怪的行为，手风琴会展开到比实际可见内容大得多的高度，然后折叠（跳转）回实际可见内容高度。

事实证明，该面板的手风琴主体有一些空的 html 元素，在我的例子中是一些 divs 和 col-sm-4 类，它们里面什么都没有。一旦我将它们注释掉，这种跳跃行为就停止了。希望这对有类似问题的人有所帮助。

【讨论】：