如何更改 boostrap 模态对话框的滑出速度?

Question

我正在为我的网站中的模态对话框使用自定义动画(请参阅 http://hawkee.com/snippet/16154/)。

这是我的CSS代码：

.modal.fade .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(0.1);
top: 300px;
opacity: 0;
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
transition: all 1.5s;
}
.modal.fade.in .modal-dialog {
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transform: translate3d(0, -250px, 0);
transform: translate3d(0, -250px, 0);
opacity: 1;
}

问题是，模态滑出太快，动画不是很流畅。如果可能的话，我更喜欢消失对话框的平滑动画。这是我需要使用 JQuery 来实现的吗？

Answer 1

您要更改的代码行是transition: all 1.5s;。

您可能希望使1.5s变慢，达到所需的速度。您可以在几秒钟内编写此内容，5s将动画长度设为 5 秒，或者以毫秒为单位编写动画，5000ms将其设置为 5000 毫秒或 5 秒长。

要解决动画的"生涩"问题，请在该命令的末尾添加ease，以使动画在开始时加速，在结束时减速。

因此，如果您希望通过缓动将动画长度设置为 3 秒，您可以编写：

-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
transition: all 3s ease;