如何让 Bootstrap 5 Modal Fade Out 效果起作用（除了 Bootstrap 之外没有 Jquery 和其他附加组件）？答案

【问题标题】：How to get Bootstrap 5 Modal Fade Out effect to work (without Jquery and other add-ons besides Bootstrap)?如何让 Bootstrap 5 Modal Fade Out 效果起作用（除了 Bootstrap 之外没有 Jquery 和其他附加组件）？
【发布时间】：2021-07-12 05:05:36
【问题描述】：

我正在努力让 Bootstrap 5 淡出模态效果来工作。目标类似于此处的“淡入和缩放”效果：https://tympanus.net/Development/ModalWindowEffects/

我需要能够在没有 jquery 或任何其他外部库的情况下做到这一点。

这是我一直在尝试的仅适用于淡入方面的 CSS； fade-scale 是一个附加到我的模态的类：

.fade-scale {
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.2s linear;
}

.fade-scale.show {
    opacity: 1;
    transform: scale(1);
}

我已经尝试了this thread 中提供的解决方案，但发现它们在这里不起作用（依赖于 Jquery/其他库或没有正确淡出）。如何让 Bootstrap 5 模态淡出？

【问题讨论】：

标签： javascript css twitter-bootstrap bootstrap-modal bootstrap-5

【解决方案1】：

要创建淡入淡出效果和缩放，您需要为 class: modal-content 添加自定义 css。

下面的工作示例：

.modal .modal-content {
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s;
}
.modal.show .modal-content {
    opacity: 1;
    transform: scale(1);
}

【讨论】：

刚试过。这根本不会消失。它只会淡入。我也需要它淡出。