修改Bootstrap模态转换 [英] Modify Bootstrap Modal Transition

问题描述

经过深入研究，我设法发现我可以使用以下选择器— .modal.fade .modal-dialog

After some digging about, I managed to find out that I could modify the transitions for Bootstrap modals with the following selector — .modal.fade .modal-dialog

我设法进行了设置，以消除幻灯片效果，仅保留淡入.

I've managed to set it so that the slide effect is removed, leaving only the fade in.

但是现在我正尝试将过渡速度放慢一点.我尝试添加 transition-duration 属性并将其更改为5秒，但是没有运气.模态仍然很快消失:

But now I'm trying to slow the transition down a little bit. I've tried adding the transition-duration property and changing it to 5 seconds, but with no luck. The modal still fades in very fast:

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .5s ease-out;
       -o-transition:      -o-transform .5s ease-out;
          transition:         transform .5s ease-out;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
          transition-duration: 5;
}

任何人都可以看到我在做什么吗?

Can anyone see what I'm doing wrong?

推荐答案

顶部的过渡是 .5s .将使用它代替 transition-duration:5; 并确保持续时间以秒为单位.

The transitions at the top are .5s. This will be used instead of the transition-duration: 5; Also make sure thst the duration is in seconds.

尝试以下CSS:

    .modal.fade .modal-dialog {
      -webkit-transition: -webkit-transform 5s ease-out;/* if this is too slow, change it back to .5s */
         -moz-transition:    -moz-transform 5s ease-out;
          -ms-transition:     -ms-transform 5s ease-out;
           -o-transition:      -o-transform 5s ease-out;
              transition:         transform 5s ease-out;
      -webkit-transform: translate(0, 0); 
         -moz-transform: translate(0, 0);
          -ms-transform: translate(0, 0);
           -o-transform: translate(0, 0);
              transform: translate(0, 0);
      -webkit-transition-duration: 5s;
         -moz-transition-duration: 5s;
           -o-transition-duration: 5s;
              transition-duration: 5s;/* note that the seconds are added */ 
    }

请参见

See How can I change the speed of the fade for alert messages in Twitter Bootstrap? This will probably help you, since it helped me to fix this same problem with the fade animation of Bootstrap modals. I made a custom animation to fix my problem, but this would work out too.

.modal.fade .modal-dialog{
   -webkit-transition: opacity 1.25s linear;
      -moz-transition: opacity 1.25s linear;
       -ms-transition: opacity 1.25s linear;
        -o-transition: opacity 1.25s linear;
           transition: opacity 1.25s linear;
 }

这篇关于修改Bootstrap模态转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！