如何减慢/控制Bootstrap中的模式关闭动画？

问题描述：

如果你的模式设置CSS动画的开放，该模式将尊重该动画，但是，当你关闭模式，它消失不履行动画。如何减慢/控制Bootstrap中的模式关闭动画？

我很困惑，因为引导文件说“的时候，语气已完成从用户被隐藏此事件被触发（等待CSS过渡才能完成）。” 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; 
    }

答

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

的事情之一，收盘时除.modal-backdrop600ms后，这是需要多少滑动式和淡出的.modal-dialog +自举模式不会淡出.modal本身。

其中仅留下你一个选择，但是你需要比CSS多一点。你必须放弃使用它的默认方法关闭模式，并用自己的函数，原则上应做到：

从.modal
删除show类从.modal-backdrop
删除show类除去modal-open类从<body>
动画调式元素（.modal，.modal-dialog和.modal-backdrop）退出动画你的心脏的内容
地方style="display:none;"上.modal
删除.modal-backdrop

这是相当多的引导做什么，但它实际上多一点，以提高可访问性。

如何减慢/控制Bootstrap中的模式关闭动画？

相关推荐