Bootstrap 3 平滑手风琴过渡

Question

我正在使用Bootstrap 3手风琴。除了转换不流畅之外，一切都正常。就像跳动的转换一样。我如何实现平滑过渡？

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 &raquo;</a>
    </div>

JS

的翻译是

JavaScript

。

$('.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");
});

我按照官方网站上的步骤操作了。

我尝试过在折叠类上使用这个过渡CSS。

.panel .collapsing{
    height: 100px !important;
    -moz-transition : height 5s;
    -webkit-transition : height 5s;
    -o-transition : height 5s;
    transition : height 5s; 
}

- Navneil Naicker

Answer 1

只需要更新过渡效果就应该可以正常工作

.collapsing {
    transition: height 0.6s;
}

- Abdullah Aman

Answer 2

跳动的幻灯片效果通常是由于高度计算不明确所致。尝试在.panel-body上设置一个高度，即使它是100%。

如果这样不起作用，请给它一个明确的宽度。

- isherwood

Answer 3

使用最大高度动画。

如果您将容器设置为默认的max-height: XXpx; 并使用CSS过渡来将max-height动画化为大于您的默认值且大于可能的容器/文本高度的数字，它将起到很好的效果。

- Smccullough