twitter-bootstrap Twitter Bootstrap 100% 高度手风琴“跳跃”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16648020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 100% height accordion "jump"
提问by Brett Postin
I'm trying to implement a 100% height accordion using the Twitter Bootstrap collapse component, exactly as described in this question.
我正在尝试使用 Twitter Bootstrap 折叠组件实现 100% 高度的手风琴，完全如本问题中所述。
I'm manually setting the heights of the .accordion-innerelements as described in this answer.
我正在手动设置.accordion-inner元素的高度，如本答案中所述。
However I'm experiencing "bouncy" behaviour when expanding/collapsing the panels. I have removed all padding/margin/border from the .accordion-innerelements to eliminate that possibility.
但是，在展开/折叠面板时，我遇到了“有弹性”的行为。我已经从.accordion-inner元素中删除了所有填充/边距/边框以消除这种可能性。
It is most noticeable in IE10, however the problem is also evident in Chrome.
它在 IE10 中最为明显，但该问题在 Chrome 中也很明显。
See this example.
请参阅此示例。
Any ideas what is causing this "jumpy" behaviour?
任何想法是什么导致这种“跳跃”行为？
采纳答案by TheHud
Late to the party, but:
聚会迟到了，但是：
I had a similar problem, and noticed that if I removed a margin-top from the element below the collapsing one, and replaced it with padding-top, the transition was smooth.
我有一个类似的问题，并注意到如果我从折叠元素下方的元素中删除一个 margin-top，并用 padding-top 替换它，过渡是平滑的。
So - check for margins on adjacent elements, and try replacing them with padding, if possible.
所以 - 检查相邻元素的边距，如果可能，尝试用填充替换它们。
回答by Zim
I think the "jump" you're seeing is due to the CSS transitions for the .collapse class.
我认为您看到的“跳跃”是由于 .collapse 类的 CSS 转换造成的。
If you take a look at this SO thread Turning off Twitter Bootstrap Navbar Transition animation, you can see how to disable the transition with an overriding CSS class 'no-transition'. This doesn't stop the animation all together, but it speeds it up so that the jump is less noticeable...
如果您查看此 SO 线程关闭 Twitter Bootstrap 导航栏过渡动画，您可以了解如何使用覆盖 CSS 类“无过渡”禁用过渡。这并不会完全停止动画，但它会加快动画速度，使跳跃不那么明显......
Add no-transitionto your accordion-body elements..
添加no-transition到您的手风琴身体元素..
<div id="collapseOne" class="accordion-body collapse in no-transition">
Add the CSS..
添加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;
}
Updated plunker.. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview
更新 plunker .. http://plnkr.co/edit/xnvDGcDd21iCu69wKSub?p=preview
回答by Fabio
HTML:
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:
CSS：
.collapse.in{
padding-bottom:5px;
}
回答by Mohd Abdul Mujib
I was having this weird behavior where the accordion would expand to a much larger height than the actual visible content, and then collapse (jump) back to the actual visible content height.
我遇到了这种奇怪的行为，其中手风琴会扩展到比实际可见内容大得多的高度，然后折叠（跳转）回实际可见内容的高度。
Turns out that my accordion body for that panel had a few empty htmlelements, which, in my case were a few divswith col-sm-4class and nothing inside them. Once I commented them out this jumping behavior stopped. Hope this helps someone with similar problem.
结果我的那个面板的手风琴主体有一些空html元素，在我的例子中是一些divs带有col-sm-4类的元素，里面什么都没有。一旦我将它们注释掉，这种跳跃行为就停止了。希望这可以帮助有类似问题的人。
