[Bootstrap]Collapseの開閉速度を調整する方法

Bootstrap

2013.09.052024.08.23

アコーディオンメニューを簡単に実現できる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;
}

.collapsing {

position: relative;

height: 0;

overflow: hidden;

-webkit-transition: height 0.35s ease;

transition: height 0.35s ease;

}

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

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

.collapsing {

position: relative;

height: 0;

overflow: hidden;

-webkit-transition: height 0.15s ease;

transition: height 0.15s ease;

}