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

【问题标题】：How can I slow/control the modal close animation in Bootstrap?如何在 Bootstrap 中减慢/控制模态关闭动画？
【发布时间】：2018-03-18 04:59:49
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-modal bootstrap-4

【解决方案1】：

当他们说（将等待 CSS 转换完成） 时，他们的意思是：在关闭模式的默认硬编码持续时间后被硬编码触发，你不应该惹的祸。

bootstrap modal 在关闭时所做的一件事是在600ms 之后删除.modal-backdrop，这就是向上滑动和淡出.modal-dialog + 淡出.modal 本身所需的时间。

这只给你一个选择，但你需要的不仅仅是 CSS。您必须放弃使用默认方法关闭模式，并使用您自己的功能来完成，原则上应该：

从.modal 中删除show 类
从.modal-backdrop 中删除show 类
从<body> 中删除modal-open 类
让模态元素（.modal、.modal-dialog 和 .modal-backdrop）退出动画，随心所欲
将style="display:none;" 放在.modal 上
删除.modal-backdrop

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

【讨论】：