javascript - 淡入淡出 Bootstrap 3 模态

Question

我已经给出了我的 Bootstrap 3 modal一个“淡入淡出”类，但模态并没有像我期望的那样“淡入淡出”。它似乎从上方滑入，而不是淡入。

模态:

<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/

如何让我的模态像这样“淡入淡出”？

Answer 1

过渡在 css 中，使模态动画并向下滑动。如果您使用的是 LESS，您可以修改 modal.less 中的这些行，以使用 mixins 或 component-animations.less(或您自己的)中提供的过渡 mixins 获得您想要的任何行为:

  // 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);

 }