Bootstrap modal：如何淡入，但在关闭时立即消失答案

【问题标题】：Bootstrap modal: how to fade in, but immediately disappear on closeBootstrap modal：如何淡入，但在关闭时立即消失
【发布时间】：2017-03-04 02:08:01
【问题描述】：

参考 Bootstrap 3 模态：http://getbootstrap.com/javascript/#modals

我在外部模态 div 上使用 class="modal fade" 来创建 Bootstrap 模态的默认淡入/淡出效果。但我真正想做的是淡入，而不是淡出。我希望模式在按下关闭按钮时立即完全消失，没有任何挥之不去的 CSS 过渡。

如何在模态框关闭时移除 CSS 过渡，但在模态框打开时保留它？

【问题讨论】：

一些背景信息：我正在使用的网站有时会在第一个模式关闭后立即打开另一个模式。如果在 CSS 淡出过渡期间发生这种情况，我会看到布局问题（Bootstrap 说永远不要一次打开多个模式，我认为这有点相似）。通过完全删除 fade 类，这些布局问题得到了解决，但设计人员确实希望至少在打开模式时保持淡入淡出过渡，这样不会导致问题。

标签： html css twitter-bootstrap

【解决方案1】：

为“shown.bs.modal”事件添加一个处理程序，并在该处理程序中删除fade 类。

$('#myModal').on('shown.bs.modal', function (e) {
  $('#myModal').removeClass('fade');
});

fade 类定义的转换将不会发生。

【讨论】：

是的，效果很好。感谢您提供简单的解决方案。

【解决方案2】：

您可以删除 .fade 类并找到另一种方法来实现淡入，例如使用 jQuery 过渡，这样您就可以避免强行覆盖 Bootstrap。

【讨论】：

我认为 jQuery 转换不会在这里与 Bootstrap CSS/JS 一起工作（尽管如果你有特定的代码来证明它，请随时证明我错了）。