如何调整 Bootstrap 模式打开的延迟？

Question

我正在使用gem "bootstrap-sass", "~> 2.3.0.0" ，这意味着我正在使用Bootstrap 2 。 模态记录在此处。

我自己的模式是这样开始的：

#Modal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "jobsModalLabel", :role => "dialog", :tabindex => "-1"}

我像这样打开我的模式：

$("#Modal").modal().css "margin-left": ->
        -($(@).width() / 2)

我想让它加载得更快，但我无法从文档中读取如何控制延迟时间。 我试图从我的模态中删除.fade类，但这会导致加载过多。 所以我需要保留淡入淡出功能，但只是让它更快。

不确定这是 js 还是 css 问题。 我想它可以通过两种方式解决，但我不知道如何解决。

当我用下面的内容覆盖我的.fade类时，我的衰落不会加速：

.fade {
   opacity: 0;
   -webkit-transition: opacity 0.01s linear;
      -moz-transition: opacity 0.01s linear;
       -ms-transition: opacity 0.01s linear;
        -o-transition: opacity 0.01s linear;
           transition: opacity 0.01s linear;
}

如果我增加到例如3.00s ，它会变慢...

似乎.fade与添加背景的过程有关。 我希望加快模态从屏幕顶部移动到最终位置的过程。 此过程发生在添加背景之后。

Answer 1

在 bootstrap v3（我碰巧在 v3.4.1 上）中，您可以编辑modal.js （或者如果您有一个聚合的bootstrap.js ，您可以找到标有// MODAL CLASS DEFINITION标头的 modal 部分）来完成什么你正在尝试做。

将Modal.TRANSITION_DURATION和Modal.BACKDROP_TRANSITION_DURATION更改为非常低的值，例如 0 或 1 --

  ...
  Modal.TRANSITION_DURATION = 1
  Modal.BACKDROP_TRANSITION_DURATION = 1
  ...

然后转换将尽可能立即发生。

这是我所指的源代码的链接——https: //github.com/twbs/bootstrap/blob/v3.4.1/js/modal.js#L39