Bootstrap 4 可折叠卡片 - 断断续续的动画

Question

我正在使用 Bootstrap 4 并创建了一张带有 .card-header 和 .card-block 的卡片，如下所示：

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="card-block">
        card block
    </div>
</div>

我希望能够点击卡片 header 来切换卡片块。我试过使用 Bootstrap 的折叠机制（您会注意到卡片 header 中的 data-toggle="collapse"）。它有效 - 但动画非常不稳定。

我不明白为什么。 Here's an example on codepen.

Answer 1

这可能是 bootstrap 4 仍处于 alpha 阶段的原因。它可能会被修复。

我找到的唯一解决方案是通过添加 class collapse 折叠您的 card-block，然后通过 css 删除他的填充：

.card-block{ padding:0; }

Answer 2

延迟问题：

问题出在.card-block class，它默认添加了1.25rem的填充。

如果您要从 div#test-block 中删除 class 卡块，并在里面创建一个 div 和 class 卡块 (所以你保留你需要的填充），滞后问题就会消失。

点击问题：

您的#test-block 上没有class 崩溃，因此需要先添加它。这就是它在第二次尝试时起作用的原因。

如果您将名称为 "collapse" 的 class 添加到 div#test-block，您的延迟问题就会消失。

如果您希望面板默认打开，请同时添加 "in" class。例如"collapse in".

我有以下代码：

<div class="card">
    <div class="card-header">
        <a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
            card header
        </a>
    </div>
    <div id="test-block" class="collapse">
        <div class="card-block">
            card block
        </div>
    </div>
</div>

Answer 3

#test-block 具有默认状态：

    <div id='test-block' class='card block'>

点击后 class 变为

的扩展版本

    <div id='test-block' class="card-block collapse in" aria-expanded="true">

所以 div 没有正确的默认状态。更改状态以反映 collapse in 和 aria-expanded=true，只需单击 1 次即可。

我不知道为什么动画会断断续续。 :(

Bootstrap 4 可折叠卡片 - 断断续续的动画

Bootstrap 4 Collapsible Card - Choppy Animation

javascript

css

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4