经过一些研究,我设法发现我可以使用以下选择器修改 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;
}
谁能看出我做错了什么?
最佳答案
顶部的转换是 .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;
}
关于css - 修改 Bootstrap 模态转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29144988/