スポンサード

アコーディオンメニューを簡単に実現できるBootstrap のCollapse ですが、開閉速度を早くしたり遅くしたり、自由に調整したい場合の処理の方法です。

※今回はバージョン3.0 での実践を元に記事を書いております。

transition の速度調整

bootstrap.css 内の以下のクラス collapsing に記載されている transition の値を調整します。

デフォルトの設定

Bootstrap バージョン3.0 だとデフォルトの速度は 0.35sです。

.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.35s ease;
	transition: height 0.35s ease;
}

Collapse の開閉速度を早くしてみる

transition の値を調整（0.15s に変更）して開閉の速度を上げることができます。

.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.15s ease;
	transition: height 0.15s ease;
}

スポンサード