web-dev-qa-db-ja.com

bootstrap 4での折りたたみ遷移のカスタマイズ

Bootstrap 4は、クラス.collapsingを使用して、.collapse-elementの幅/高さを開閉しながらアニメーション化します。残念ながら、実際の変更は、幅/高さをインラインスタイルとして要素に追加し、トランジションの開始と終了でクラスを追加および削除することによって行われます。したがって、トランジションをカスタマイズするのは非常に困難です（たとえば、幅のトランジションの代わりにタイミングを変更したり、フェードイン/フェードアウトしたりします）。

これまでに試したこと：

  • Cssプロパティtransition:noneを.collapsingクラスに追加する：これは遷移を取り除くのに役立ちますが、クラスがまだ数ミリ秒前に追加されるため、開始/終了は遷移時間によって遅延されます実際の変更が行われます。
  • .collapsingクラスへのカスタムcssキーフレームの追加：開閉に同じクラスが使用されているため、両方に同じアニメーションが表示されます。

移行を変更する方法はありますか？フェードイン/フェードアウトするには（不透明度の変更）、またはbootstrap.jsのカスタムバージョンをビルドする必要がありますか？

twitter-bootstraptransitiontwitter-bootstrap-4-beta
11
TiPE

この例を見てみましょう：

.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>
5
Luca Perico

SASSを使用してbootstrap.cssをコンパイルする場合は、$transition-collapse変数の_variables.scssファイル。

Bootstrap v4.2.1のデフォルト設定は、254行目です。

$transition-collapse: height .35s ease !default;

私は.35秒を.15秒に変更しましたが、あなたをあなたの幸せなものに設定できます。

1
Drew