Bootstrap の collapse の仕組み

Bootstrap の collapse は以下のような動作を行う。

1. collase が付与された要素は、 show も同時に付与されていない限り、 display: none になる。
   • 補足: navbar-expand の中にある navbar-collapse は、 expand 条件が見たされる場合には display: flex する。
2. トグルの最初は、 collapsing が付与される。
   • collapsing は、 height: 0px; overflow: hidden を設定し、見えない所で表示したい collapse されていた内容の content box を生成する。
3. collapsing が dom に反映された直後に、 collapsing の中身の scrollHeight を計算し、それを collapsing の要素の style.height に設定する。
   • collapsing によって transition が設定されているため、代入された height に向かって transition アニメーションが開始される。
4. transition が終わったタイミングで、 collapsing のクラスを削除し、 collapse show を付与する。

メモ

Bootstrap 5 を Vue 3 に組込む一環で、Transition の機構を良い感じに使って css のカスタムクラスを付与するだけで同様の動作ができないか調べていたが、下記のスレッドによれば、 bootstrap での実現方法と同じく javascript をゴリゴリ書いて制御する必要がある模様。

javascript - Smooth vue collapse transition on v-if - Stack Overflow

stackoverflow.com