LoginSignup
15
16

More than 5 years have passed since last update.

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

Posted at

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のスタイルを上書きするような位置に書く必要があります。

15
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
16