淡入和淡出 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 端口，您可以利用样式表的级联行为并将您的覆盖添加到自定义 css 文件中，该文件在 bootstrap.css 文件之后加载。

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

 }

Answer 2

默认情况下，引导模式淡入。也许它消失得太快了，你看不到？如果您查看 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;
}

Answer 3

拨弄您的代码：http://jsfiddle.net/KqXBM/

您指的是 jQuery 的 fadeOut 方法，这不是 Bootstrap fade 类所做的。如果需要实现这个效果，不要依赖BS的库，使用jQuery。