Question

如果为模态打开设置css动画，则模态将尊重该动画，但是当您关闭模态时，它会在不尊重动画的情况下消失。

我很困惑，因为引导文档说＆＃34;当模态完成对用户的隐藏时将触发此事件（将等待CSS转换完成）。＆＃34; https://getbootstrap.com/docs/4.0/components/modal/

这是一个例子; https://jsfiddle.net/chaz7979/o04pxo88/3/

注意模态如何非常缓慢地向下滑动但是立即消失。这是一个错误还是我错过了一些CSS？

错误与否，有没有办法让模态关闭/离开它进入页面的方式相同？

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS

   .modal.fade .modal-dialog {
        transition: 10s;
    }

Answer 1

当他们说（将等待CSS过渡完成）他们的意思是：在关闭模态的默认硬编码持续时间后，它被硬编码触发，<强>你不应该搞乱 。

关闭时，bootstrap模式执行的一件事就是在.modal-backdrop之后移除600ms，这是滑动和淡出.modal-dialog +淡出.modal本身。

只留下一个选项，但你需要的不仅仅是CSS。你必须放弃使用它的默认方法关闭模态，并使用你自己的函数来做，原则上它应该：

从show

.modal

从show

.modal-backdrop

从modal-open

<body>

动画模式元素（.modal，.modal-dialog和.modal-backdrop）将动画退出到您内心的内容
将style="display:none;"放在.modal
删除.modal-backdrop

这几乎是Bootstrap所做的，除了它实际上做得更多，以改善可访问性。

如何在Bootstrap中减慢/控制模态关闭动画？

1 个答案: