淡入和淡出Bootstrap 3模态 [英] Fade in and out a Bootstrap 3 modal

问题描述

我已将 Bootstrap 3模式作为'淡入淡出'类，但模式不是'像我期望的那样淡入淡出。它似乎从上面滑入，而不是淡入。

I have given my Bootstrap 3 modal a 'fade' class but the modal doesn't 'fade' in and out as I expect it to. It seems to slide in from above, rather than fade in.

模态：

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

To show an example of how I'd expect a 'fade' effect to look I've created this example: http://jsfiddle.net/spQp5/

如何让我的模态像这样进入'淡入淡出'？

How can I get my modal to 'fade' in and out like this?

推荐答案

Bootstrap模态淡入默认。也许你看得太快就会消失？如果您查看css，您可以看到它们具有转换设置以使其淡入.15秒：

Bootstrap modals fade in by default. Perhaps it is fading in too quickly for you to see? If you look at the css you can see they have transitions setup to make it fade in for .15 seconds:

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

为了演示目的，将淡入淡出更改为1秒可能会显示它实际上正在消失。

Changing the fade in to one second, for demonstration purposes, may show you that it is in fact fading in.

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

这篇关于淡入和淡出Bootstrap 3模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！