Bootstrap-4 Klapp-Karte - Abgehackte Animationen

Ich bin mit Bootstrap 4 und haben eine Karte mit einem .Karte-Kopf-und .Karte-block etwa so:

<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>

Ich möchte in der Lage sein, um Sie auf die Karte klicken-header an, um die Karte zu blockieren. Ich habe versucht, mit Hilfe von Bootstrap-Kollaps-Mechanismus (Sie werden bemerken, dass der data-toggle="collapse" im Kartenhalter). Es funktioniert - aber die Animationen extrem abgehackt.

Ich kann nicht herausfinden, warum. Hier ist ein Beispiel auf codepen.

InformationsquelleAutor jbyrd | 2015-11-10
  1. 11

    Laggy problem:

    Das problem ist das .Karte-block Klasse, es fügt eine Polsterung von 1,25 rem standardmäßig.

    Wenn Sie entfernen würde, die Klasse Karte-block aus der div#test-block, und erstellen Sie ein div-innen mit der Klasse Karte-block (so halten Sie die Polsterung, die Sie benötigen), das laggy-problem wird Weggehen.

    Clicky problem:

    Es gibt keine Klasse mit dem Zusammenbruch auf Ihrem #test-block, so muss es fügen Sie es zuerst. Das ist, warum es funktioniert beim zweiten Versuch.

    Wenn Sie fügen Sie eine Klasse mit dem Namen "Zusammenbruch" zu div#test-block, Ihre laggt problem gehen Weg.

    Wenn Sie möchten, dass das panel standardmäßig geöffnet werden soll, fügen Sie die "in" - Klasse zu. z.B. "Zusammenbruch".

    Ich habe den folgenden code:

    <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>
    • Schöne Lösung. Auch wäre es sinnvoll, hinzufügen collapse in Klasse, um block bereits standardmäßig geöffnet.
    • Hinzugefügt, danke für den input.
    • Das war es! Ich habe die .Karte block padding: 0, und fügte hinzu, eine div.Karte-block-Inhalte zum Verkleben der Polsterung auf, statt.
    • wenn Sie möchten, es standardmäßig geöffnet, ja stimmt. In meinem Fall habe ich eigentlich nicht.
    InformationsquelleAutor Timon
  2. 3

    Dass wahrscheinlich der Grund, warum bootstrap-4 ist noch in der alpha. Es wird wahrscheinlich fix.

    Die einzige Lösung, die ich gefunden ist, um Zusammenbruch Ihrer card-block durch das hinzufügen der Klasse collapse, und dann das entfernen seiner Polsterung css : 

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

    Die #test-block ist der Standard-Zustand:

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

    Wenn darauf geklickt wird, sobald die Klasse ändert, zu der erweiterten version von 

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

    Also das div nicht die korrekte default-Zustand. Ändern Sie den Status zu reflektieren, die collapse in und aria-expanded=true und es dürfte nur 1 Klick.

    Ich habe keine Ahnung, warum die animation ist abgehackt. 🙁

    InformationsquelleAutor Halycon
Schreibe einen Kommentar