javascript - 如何更改 Bootstrap 模式对话框的滑出速度？

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;