Question

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

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

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

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

请参阅此example。

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

Answer 1

晚会，但是：

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

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

Answer 2

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

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

将no-transition添加到您的accordion-body元素..

<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

Answer 3

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

原来我的那个小组的手风琴主体有一些空的html元素，在我的例子中，有divs个col-sm-4类，而且里面什么都没有。一旦我评论出来，这种跳跃行为就停止了。希望这可以帮助有类似问题的人。

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

3 个答案: