Bootstrap 4 zusammenklappbarer Karte - Choppy-Animation

Question

Ich bin mit Bootstrap 4 und haben eine Karte mit einem .card-Header und .card-Block wie so erstellt:

<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 das klicken, um der Lage sein, Kartenkopf, um den Kartenblock umzuschalten. Ich habe versucht, den Bootstrap-Mechanismus zu verwenden (Sie werden die data-toggle="collapse" im Kartenheader bemerken). Es funktioniert - aber die Animation ist extrem abgehackt.

Ich kann nicht herausfinden, warum. Here's an example on codepen.

Answer 1

Laggy Problem:

Das Problem ist die . Card-Block Klasse, es fügt standardmäßig eine Auffüllung von 1,25rem hinzu.

Wenn Sie den Klassenkartenblock aus dem div # -Testblock entfernen und mit dem Klassenkartenblock ein div-Element erstellen würden (damit Sie die von Ihnen benötigte Polsterung behalten), wird das Laggy-Problem verschwinden.

Clicky Problem:

Es gibt keine Klasse mit Kollaps auf Ihrem # test-Block, so muss es zunächst hinzuzufügen. Deshalb funktioniert es beim zweiten Versuch.

Wenn Sie eine Klasse mit dem Namen "collapse" zu div # test-block hinzufügen, wird Ihr Laggy-Problem verschwinden.

Wenn das Fenster standardmäßig geöffnet werden soll, fügen Sie auch die Klasse "in" hinzu. z.B. "einbrechen".

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> 

Answer 2

Das ist wahrscheinlich warum Bootstrap 4 noch in Alpha ist. Es wird wahrscheinlich repariert werden.

Die einzige Lösung fand ich Ihre card-block zum Einsturz durch die Klasse Hinzufügen collapse, und dann seine Polsterung von CSS entfernen:

.card-block{ padding:0; } 

Answer 3

Die # Test-Block hat den Standardzustand:

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

Wenn einmal die Klassenänderungen auf die erweiterte Version von

geklickt

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

So hat das Div nicht den richtigen Standardzustand. Ändern Sie den Status, um die collapse in und aria-expanded=true widerzuspiegeln, und es sollte nur 1 Klick erfordern.

Ich habe keine Ahnung, warum die Animation abgehackt ist. :(