淡入淡出一个Bootstrap 3模式

Fade in and out a Bootstrap 3 modal

本文关键字：一个 Bootstrap 模式 淡出 淡入      更新时间：2023-09-26

我已经给了我的Bootstrap 3模态一个'fade'类，但模态没有'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/

我怎么能让我的模态"淡出"像这样?

过渡在css中，并导致模式动画和滑动。如果使用LESS，可以在modal中修改这些行。使用mixins或组件动画中提供的过渡mixins来获得你想要的任何行为。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端口，您可以利用样式表的级联行为，并将您的覆盖添加到自定义css文件中，该文件在bootstrap.css文件之后加载。

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

引导模态默认淡入。也许它消失得太快，你看不到?如果你看一下css，你可以看到他们有过渡设置，使它淡出0.15秒:

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

为了演示，将淡入时间改为1秒，可能会显示它实际上正在淡入。

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

查看您的代码:http://jsfiddle.net/KqXBM/

你指的是jQuery的fadeOut方法，这不是什么Bootstrap fade类做的。如果你需要达到这种效果，不要依赖BS的库，使用jQuery。

相关文章：