jQuery Bootstrap 3 平滑的手风琴过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20874492/
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
Bootstrap 3 smooth accordion transitions
提问by Navneil Naicker
I' am using a Bootstrap 3 accordion. Everything works fine except the transition is not smooth. It's like jumping transitions. How can I have a smooth transition?
我正在使用 Bootstrap 3 手风琴。一切正常，除了过渡不顺利。这就像跳跃过渡。我怎样才能顺利过渡？
HTML
HTML
<div class="panel" id="<?php echo $id; ?>">
<div class="panel-title"><?php the_title(); ?></div>
<div id="collapse-<?php echo $id; ?>" class="panel-collapse collapse" style="overflow:hidden; display: block;">
<div class="panel-body"><?php the_content(); ?></div>
</div>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $id; ?>" class="collapsed read_more" id="btn-collapse-<?php echo $id; ?>">Read More »</a>
</div>
JS
JS
$('.panel-collapse').on('shown.bs.collapse', function () {
var collapse_id = $( this ).attr("id");
$(".panel > #btn-"+collapse_id).text("Close");
});
$('.panel-collapse').on('hidden.bs.collapse', function () {
var collapse_id = $( this ).attr("id");
$(".panel > #btn-"+collapse_id).text("Read More");
});
I did follow everything as on official site.
我确实按照官方网站上的所有内容进行操作。
What I have tried:
我尝试过的：
This tranisiton CSS on collapsing Class
这个 tranisiton CSS on collapsing Class
.panel .collapsing{
height: 100px !important;
-moz-transition : height 5s;
-webkit-transition : height 5s;
-o-transition : height 5s;
transition : height 5s;
}
回答by Abz
Just updating transition should work
只是更新过渡应该工作
.collapsing {
transition: height 0.6s;
}
回答by isherwood
Jumping slide effects are often caused by ambiguous height calculations. Try putting a height on .panel-body, even if it's 100%.
跳跃滑梯效果通常是由高度计算不明确造成的。尝试在 上设置高度.panel-body，即使它是 100%。
If that doesn't work, give it an explicit width.
如果这不起作用，请给它一个明确的宽度。
回答by Smccullough
Animate max-height instead.
动画 max-height 代替。
If you set your container to max-height: XXpx; as a default and use CSS transitions to animate the max-height to a number greater than your default and greater than your possible container/text height it will work like a charm.
如果您将容器设置为 max-height: XXpx; 作为默认值并使用 CSS 过渡将 max-height 设置为大于默认值且大于可能的容器/文本高度的数字，它将像魅力一样工作。
