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;

如何改变boostrap模态对话框的滑出速度？

1 个答案: