web-dev-qa-db-ja.com

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の例です 。

javascriptcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
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 inとaria-expanded=trueを反映するように状態を変更すると、1回のクリックだけで済みます。

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

0
Halycon