web-dev-qa-db-fra.com

Personnaliser la transition d'effondrement dans bootstrap 4

Bootstrap 4 utilise la classe .collapsing pour animer la largeur/hauteur d’un élément .collapse lors de son ouverture/fermeture. Malheureusement, le changement réel est abordé en ajoutant la largeur/hauteur en tant que style en ligne à l'élément, puis en ajoutant et en supprimant la classe au début et à la fin de la transition. Par conséquent, il est assez difficile de personnaliser la transition (par exemple, changer le minutage ou un fondu en entrée/sortie au lieu d’une transition en largeur).

Ce que j'ai essayé jusqu'à présent:

  • Ajout de la propriété css transition:none à la classe .collapsing: Ceci aide à supprimer la transition, mais son ouverture/fermeture est toujours retardée, car la classe est ajoutée pendant quelques millisecondes avant le changement.
  • Ajout d'images clés CSS personnalisées à la classe .collapsing: Etant donné que la même classe est utilisée pour l'ouverture et la fermeture, la même animation est affichée pour les deux.

Existe-t-il un moyen de changer la transition, par exemple Ouverture/fermeture en fondu (changement d'opacité) ou dois-je créer une version personnalisée du fichier bootstrap.js? 

twitter-bootstraptransitiontwitter-bootstrap-4-beta
8
TiPE

Jetez un oeil à cet exemple:

.collapse {
  visibility: hidden;
}
.collapse.show {
  visibility: visible;
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
                horizontal collapse
            </button>
            <div id="demo" class="collapse show width">
                <div style="width:400px;">
                    <p>Works smoother when element has defined width. Egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <button role="button" class=" btn btn-danger" data-toggle="collapse" data-target="#demo2">
                vertical collapse
            </button>
            <div id="demo2" class="collapse show">
                <div>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                </div>
            </div>
        </div>
    </div>
</div>

1
Luca Perico