webdevqa.jp.net

Bootstrap 4折りたたみカード-途切れるアニメーション

私は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"(カードヘッダー内)。動作しますが、アニメーションは非常に不安定です。

理由がわかりません。 これはcodepenの例です

13
jbyrd

遅延問題:

問題は。card-blockクラスであり、デフォルトで1.25remのパディングが追加されます。

Div#test-blockからclass card-blockを削除し、class card-blockを使用して内部にdivを作成する場合(必要なパディングを維持するため)、遅延の問題は解消されます。

クリック音の問題:

#test-blockに折りたたみのクラスはないため、最初に追加する必要があります。そのため、2回目の試行でも機能します。

「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>
11
Timon

bootstrap 4はまだアルファ版です。おそらく修正されるでしょう。

私が見つけた唯一の解決策は、あなたのcard-blockクラスcollapseを追加し、cssによるパディングを削除します。

.card-block{ padding:0; }
3
Nvan

#test-blockのデフォルトの状態:

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

クリックすると、クラスがの拡張バージョンに変わります

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

したがって、divには正しいデフォルト状態がありません。 collapse inaria-expanded=trueを反映するように状態を変更すると、1回のクリックだけで済みます。

なぜアニメーションが途切れるのかわかりません。 :(

0
Halycon