css - 修改 Bootstrap 模态转换

Question

经过一些研究，我设法发现我可以使用以下选择器修改 Bootstrap 模态的转换 — .modal.fade .modal-dialog

我已经设法将其设置为删除幻灯片效果，只留下淡入。

但现在我正在尝试稍微放慢过渡速度。我尝试添加 transition-duration 属性并将其更改为 5 秒，但没有成功。模式仍然非常快地消失:

.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;
}

谁能看出我做错了什么？

Answer 1

顶部的转换是 .5s。这将代替 transition-duration: 5; 还要确保持续时间以秒为单位。

试试这个 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 */ 
    }

编辑:参见 How can I change the speed of the fade for alert messages in Twitter Bootstrap?这可能会对您有所帮助，因为它帮助我解决了与 Bootstrap 模态的淡入淡出动画相同的问题。我制作了一个自定义动画来解决我的问题，但这也能解决问题。

.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;
 }