How to get Bootstrap 5 Modal Fade Out effect to work (without Jquery and other add-ons besides Bootstrap)?

Question

I'm struggling to get Bootstrap 5 fade out of modal effect to work. The goal is something similar to the "Fade In & Scale" effect here: https://tympanus.net/Development/ModalWindowEffects/

I need to be able to do this without jquery or any other external libraries.

Here's the CSS I've been trying that works only on the fade-in side of things; fade-scale is a class attached to my modal:

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

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

I've tried the solutions offered in this thread but have found them not to work here (either relied on Jquery/other libraries or didn't fade out properly). How can I get a Bootstrap 5 modal to fade out?

Answer 1

To create the fade effect and scale you need to add custom css for class: modal-content.

Working example below:

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