修改引导模态转移

Question

一些挖一下，我设法找到了，我可以修改过渡为引导情态动词有以下选择后 - .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?这可能会帮助你，因为它让我与引导情态动词的动画渐变解决这个同样的问题。我制作了一个自定义动画来解决我的问题，但这也可以解决。

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