web-dev-qa-db-fra.com

Bootstrap 4 Carte pliable - Animation agitée

J'utilise Bootstrap 4 et j'ai créé une carte avec un .card-header et .card-block comme ceci:

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

Je veux pouvoir cliquer sur l'en-tête de la carte pour basculer le bloc de carte. J'ai essayé d'utiliser le mécanisme de repli de Bootstrap (vous remarquerez le data-toggle="collapse" dans l'en-tête de la carte). Cela fonctionne - mais l'animation est extrêmement saccadée.

Je ne comprends pas pourquoi. Voici un exemple sur codepen .

javascriptcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4
13
jbyrd

problème Laggy:

Le problème est la classe . Card-block, elle ajoute un remplissage de 1,25rem par défaut.

Si vous supprimez le bloc de carte de classe du bloc de test div # et créez un div à l'intérieur avec le bloc de carte de classe (afin de conserver le remplissage dont vous avez besoin), le problème de décalage disparaîtra.

Problème Clicky:

Il n'y a pas de classe avec effondrement sur votre # test-block, donc il doit d'abord l'ajouter. C'est pourquoi cela fonctionne au deuxième essai.

Si vous ajoutez une classe avec le nom "collapse" à div # test-block, votre problème de décalage disparaîtra.

Si vous souhaitez que le panneau soit ouvert par défaut, ajoutez également la classe "in". par exemple. "effondrement".

J'ai le code suivant:

<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

C'est probablement pourquoi bootstrap 4 est toujours en alpha. Ce sera probablement corrigé.

La seule solution que j'ai trouvée est de réduire votre card-block en ajoutant la classe collapse, puis en supprimant son remplissage par css:

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

Le # test-block a l'état par défaut:

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

Lorsque vous cliquez dessus une fois que la classe passe à la version étendue de

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

Ainsi, le div n'a pas l'état par défaut correct. Modifiez l'état pour refléter le collapse in et aria-expanded=true et il ne devrait nécessiter qu'un seul clic.

Je ne sais pas pourquoi l'animation est saccadée. :(

0
Halycon