Posted at

bootstrap modal の表示速度を変更する

More than 3 years have passed since last update.

bootstrapのmodalの表示スピードを速くしたかったので、bootstrapのmodalのoptionsで変更できないか調べたが、cssだけで変更できるみたい。

//fade out のスピード

.modal.fade {
transition-duration: 0.1s;
}

//fade in のスピード
.modal.in {
transition-duration: 0.1s;
}

//slide out のスピード
.modal.fade .modal-dialog{
transition-duration: 0.1s;//slide out のスピード
transform: translate3d(0, -5%, 0);//slide開始位置(x,y,z)
}

//slide in のスピード
.modal.in .modal-dialog{
transition-duration: 0.1s;//slide in のスピード
transform: translate3d(0, 0, 0);//slide終了位置(x,y,z)
}

fade outとslide outのスピードは0.5sくらい以上?にしても効かないみたい、bootstrapのjsか何かが邪魔してるかも。

なので、一応表示する時のスピードは変えられますってことで許してください。

あと、transformでtranslate3dの値も指定しているのは速度を上げた場合、開始位置はデフォルトの-25%より0に近づけたほうが見え方がよくなるので。

さらに、cssはbootstrapのスタイルを上書きするような位置に書く必要があります。