如何讓 Bootstrap 5 Modal Fade Out 效果起作用（除了 Bootstrap，沒有 Jquery 和其他附加組件）？

Question

我正在努力讓 Bootstrap 5 淡出模態效果來工作。 目標類似於此處的“淡入和縮放”效果： https://tympanus.net/Development/ModalWindowEffects/

我需要能夠在沒有 jquery 或任何其他外部庫的情況下做到這一點。

這是我一直在嘗試的 CSS ，它只適用於淡入淡出的一面； fade-scale 是一個 class 附加到我的模態：

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

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

我已經嘗試過這個線程中提供的解決方案，但發現它們在這里不起作用（依賴於 Jquery/其他庫或者沒有正確淡出）。 如何讓 Bootstrap 5 模態淡出？

Answer 1

要創建漸變效果和比例，您需要為 class 添加自定義 css：modal-content。

下面的工作示例：

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