淡入和淡出Bootstrap 3模态

Question

我给了我的Bootstrap 3模态一个'淡入淡出'类但是模态不会像我期望的那样"淡入淡出".它似乎从上面滑入,而不是淡入.

莫代尔:

<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,则可以使用mixins或component-animations.less(或您自己的)中提供的转换混合来修改modal.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);

 }

Answer 2

Bootstrap模式默认淡入.也许你看得太快就会消失？如果您查看css,您可以看到它们具有过渡设置,使其淡入.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;
}