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

Posted 2023-02-22

【中文标题】Bootstrap 4 可折叠卡片 - 断断续续的动画

【英文标题】：Bootstrap 4 Collapsible Card - Choppy Animation

【发布时间】：2016-02-11 15:03:55

【问题描述】：

我正在使用 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>

我希望能够单击卡片标题来切换卡片块。我尝试过使用 Bootstrap 的折叠机制（您会注意到卡片标题中的data-toggle="collapse"）。它可以工作 - 但动画非常不稳定。

我不知道为什么。 Here's an example on codepen.

【参考方案1】：

滞后问题：

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

如果您要从 div#test-block 中删除 class card-block，并在里面创建一个带有 class card-block 的 div（这样您就可以保留所需的填充），那么滞后问题就会消失。

点击问题：

您的#test-block 上没有带有collapse 的类，因此需要先添加它。这就是为什么它在第二次尝试时有效。

如果你将一个名为“collapse”的类添加到 div#test-block，你的滞后问题就会消失。

如果您希望面板默认打开，请添加“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>

【讨论】：

不错的解决方案。此外，添加collapse in 类以默认情况下已打开块也会很有用。

做到了！我将 .card-block 设置为 padding: 0，并添加了一个 div.card-block-content 来代替填充。

@RashadIbrahimov - 如果你希望它默认打开，是的。就我而言，我实际上没有。

【参考方案2】：

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

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

.card-block padding:0; 

【参考方案3】：

#test-block 具有默认状态：

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

当类更改为扩展版本时单击

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

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

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