淡入淡出Bootstrap 3模态框

Question

我给我的Bootstrap 3模态框添加了'fade'类，但是模态框并没有像我期望的那样'淡入淡出'，而是从上方滑入。

模态框：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

触发按钮：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

为了展示“渐变”效果的例子，我创建了这个示例：http://jsfiddle.net/spQp5/。

我的模态框如何才能像这样“渐变”淡入淡出？

- henrywright

---

尝试将div类更改为class =“modal fade in”。 - APAD1

那似乎起作用了，但我无法确定，因为淡出效果发生得太快了。如果我关闭模态框，然后重新打开，从顶部滑入的效果就会回来。 - henrywright

Answer 1

转换效果是在CSS中实现的，会导致模态框动画滑落。如果您正在使用LESS，则可以修改modal.less中的这些行，使用mixins或component-animations.less（或您自己的）中提供的过渡混合器来获得所需的任何行为：

转换效果是在 CSS 中实现的，会导致模态框动画滑落。如果您正在使用 LESS，则可以修改 modal.less 中的这些行，使用 mixins 或 component-animations.less（或您自己的文件）中提供的过渡混合器来获得所需的任何效果。

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    .translate(0, -25%);
    .transition-transform(~"0.3s ease-out");
  }
  &.in .modal-dialog { .translate(0, 0)}

如果你没有使用LESS或官方的Sass端口，你可以利用样式表的层叠行为，并将覆盖样式添加到加载在bootstrap.css文件之后的自定义css文件中。

 .modal.fade .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0); // IE9 only
          transform: translate(0, 0);

 }

- jme11

Answer 2

Bootstrap模态框默认会淡入。也许它淡入得太快了，你来不及看见？如果你查看CSS文件，你会发现它们设置了过渡效果，使其在0.15秒内淡入：

.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    transition: opacity .15s linear;
}

将淡入时间改为一秒，可以用于演示目的，这样可以让您看到它实际上正在淡入。

.fade {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

- david

---

这确实是正在发生的事情。我现在可以看到淡出效果，但是a）模态仍然从顶部“滑入”，b）淡出不会发生。请参见此处http://jsfiddle.net/KqXBM/1/。 - henrywright

顶部滑动来自于“modal-dialog”类。具体来说，是选择器“.modal.fade .modal-dialog”。 - david

将我的答案添加到下面以去除幻灯片行为。 - jme11

你好 @david，淡入效果可以正常工作，但淡出效果不行。 - Avanish Kumar

这次比之前好了，但在关闭模态框时背景不是很优雅。 - Marc Roussel

Answer 3

你的代码示例: http://jsfiddle.net/KqXBM/

你在谈论jQuery的fadeOut方法，但它并不是Bootstrap fade类所做的事情。如果你需要实现这个效果，不要依赖BS的库，使用jQuery。

- punund

---

谢谢提供代码！我不介意在这里使用BS库，jQuery也可以。我只是不知道如何将其应用于我的模态框。 - henrywright