问题 Twitter Bootstrap 100％高度手风琴“跳跃”

我正在尝试使用Twitter Bootstrap折叠组件实现100％高度的手风琴，完全如此描述题。

我正在手动设置高度 .accordion-inner 如此描述的元素回答。

然而，当扩展/折叠面板时，我正在经历“弹性”行为。我删除了所有填充/边距/边框 .accordion-inner 消除这种可能性的要素。

这在IE10中最引人注目，但问题在Chrome中也很明显。

看到这个例。

是什么导致这种“跳跃”行为？

5785

2018-05-20 10:58

起源

它适用于铬 - Xavier

我已经检查了Chromium，底部的“弹跳”仍然存在。 - Brett Postin

是的，你是对的没有注意到它..但坏消息是在boostrap文件中还有一个“反弹”：检查出来 twitter.github.io/bootstrap/javascript.html#collapse - Xavier

是的，我明白你的意思了。它并不常见，所以我没有注意到它，并认为这可能与我试图使其高度100％有关。 - Brett Postin

看到 stackoverflow.com/a/33697157/2208713 - 我尝试了为这个问题提供的所有解决方案答案，并发现这个答案实际上在另一个线程中有效。它归结为不直接填充扩展部分（例如面板体），而是使用具有填充的容器div - Andy Lorenz

答案:

迟到了，但是：

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

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

2017-07-31 23:02

对我而言，它是相似的，但它是围绕.collapse div的边距。我有两个班级的div： .content 和 .collapse。 .content有利润。我将这两个类分成两个独立的div，用 .collapse 包皮 .content - MeltingDog

我认为你看到的“跳跃”是由.collapse类的CSS转换引起的。

如果你看看这个SO线程关闭Twitter Bootstrap Navbar Transition动画，您可以看到如何使用重写CSS类“无转换”禁用转换。这并不能完全停止动画，但它会加快速度，使跳跃不那么明显......

加 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

2018-05-20 11:19

谢谢，但理想情况下我想保留动画（我不再看到）。你是说你不认为这是可能的吗？ - Brett Postin

您可以尝试通过增加动画来减慢动画速度 s 在过渡，但无论哪种方式，我认为过渡导致“跳跃” - Zim

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

2018-05-02 18:33

我有这种奇怪的行为，手风琴将扩展到比实际可见内容更大的高度，然后折叠（跳跃）回到实际可见内容高度。

事实证明，我那个小组的手风琴主体有一些空洞 html 元素，在我的例子中是少数 divs 同 col-sm-4 他们内心没什么。一旦我评论出来，这种跳跃行为就停止了。希望这可以帮助有类似问题的人。

2018-05-23 14:53

问题 Twitter Bootstrap 100％高度手风琴“跳跃”

答案:

热门问题