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

我试图使用Twitter Bootstrap崩溃组件实现100％高度手风琴，完全按照question中所述。Twitter Bootstrap 100％高度手风琴“跳”

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

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

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

看到这个example。

任何想法是什么造成这种“跳跃”的行为？

来源

2013-05-20 Brett Postin

它可以很好地与铬 – Xavier

我已经在铬中检查和底部的“反弹”仍然存在。 –

是的，你是对的没有注意到它..但坏消息是也有一个“反弹”的boostrap文件：检查出http://twitter.github.io/bootstrap/javascript。html＃collapse – Xavier

迟到了，但是：

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

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

来源

2014-07-31 23:02:17 TheHud

对我来说它是相似的，但它是.collapse div的边缘。我有一个有两个类的div：'.content'和'.collapse'。 '.content'有余量。我将这两个类分成两个独立的div，用'.collapse'封装'.content' – MeltingDog

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

如果你看看这个SO线程Turning off Twitter Bootstrap Navbar Transition animation，你可以看到如何通过覆盖CSS class'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

来源

2013-05-20 11:19:42 ZimSystem

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

你可以尝试通过增加转换上的s来减慢动画的速度，但是无论如何我认为转换引起了“跳跃” – ZimSystem

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

来源

2015-05-02 18:33:35 Fabio

我是有这种怪异的行为，其中手风琴将扩大到比实际可见的内容大得多的高度，然后塌陷（跳）回到实际可见的内容高度。

原来，我的蛇腹主体为面板有几个空html元素，这在我的情况下是一个与divs几col-sm-4类里面什么都没有他们。一旦我评论他们这个跳跃行为就停止了。希望这可以帮助有类似问题的人。

来源

2016-05-23 14:53:41

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

回答

相关问题