Javascript 淡入淡出引导3模式

我已经给了我的a“淡入淡出”类，但模态并没有像我期望的那样“淡入淡出”。它似乎从上方滑入，而不是逐渐消失

模态：

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

启动演示模式

为了展示我期望“淡入”效果的效果，我创建了以下示例：

我怎样才能让模态像这样“淡入淡出”？

摆弄你的代码：

---

您所指的是jQuery的

fadeOut

方法，这不是引导

fade

类所做的。如果您需要实现这种效果，请不要依赖BS的库，而使用jQuery。

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

---

过渡位于css中，并使模态设置动画并向下滑动。如果您使用的是LESS，则可以在modal.LESS中修改这些行，以使用mixins或component-animations.LESS（或您自己的）中提供的过渡mixin获得您想要的任何行为：

如果您没有使用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);

 }

---

尝试将div类更改为

class=“modal fade-in”

，这似乎可行，但我无法判断，因为褪色发生得太快了。如果我关闭模态，然后从顶部重新打开幻灯片，效果会回来谢谢你的提琴！我不介意为此使用BS库，jQuery就可以了。我只是不知道如何将它应用到我的模型中。这确实是正在发生的事情。我现在可以看到淡入效果，但a）模态仍然从顶部“滑入”，b）淡出没有发生。请看这里，从顶部开始的滑动来自“模态对话框”类。特别是使用选择器“.modal.fade.modal dialog”。在下面添加我的答案以删除幻灯片行为Hello@david它可以实现淡入效果但不淡出效果比以前更好，但在关闭模式时背景不太优雅

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

 }