Модальная анимация не работает при увольнении ⇐ Javascript

[Anonymous]

Я пытаюсь создать модальный оживление на показе, что работает, но когда я пытаюсь отклонить его, добавив класс Hide , анимация не работает.
Вот стиль CSS:

Код: Выделить всё

/* MODAL STYLING */
.modal{
height: 100vh;
width: 100vw;
min-height: 100%;
min-width: 100%;
margin-inline: auto;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: 50;
flex-direction: column;
justify-content: center;
align-items: center;
backdrop-filter: blur(3px);
display: none;
}

.modal.show{
display: flex;
animation: pop-up 0.5s ease-in-out;
}

.modal.hide{
/* opacity: 1; */
animation: pop-down 0.5s ease-in;
}

.hidden{
display: none !important;
}

/* Animations */

@keyframes pop-up {
0%{
transform: scale(0.5);
opacity: 0;
}
70%{
transform: scale(1.1);
opacity: 1;
}
100%{
transform: scale(1);
}
}

@keyframes pop-down {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
< /code>
код JavaScript: < /p>
const toggleModal = show => {
    if (show) {
        modal.classList.remove('hide');
        modal.classList.remove('hidden');
        modal.classList.add('show');
    } else {
        modal.classList.remove('show');
        modal.classList.add('hide');

        modal.addEventListener('animationend', (e) => {
            if (e.animationName === 'pop-down') {
//For some reason, this never triggers.
modal.classList.remove('hide');
modal.classList.add('hidden');
}
           },{ once: true }
        );
    }

}

brandElement.addEventListener('click', (e) => {
    toggleModal(true);
})

closeBtn.addEventListener('click', (e) => {
    toggleModal(false);
})

window.addEventListener('click', (e) => {
    if (e.target == modal) {
        // modal.classList.remove('show');
        toggleModal(false);
    }
})

После проверки модального элемента после увольнения я обнаружил, что анимация не была отстранена, но анимация не играла. ничего не нашел по этому поводу. Я мог бы просто оживить с переходами, но я хочу большего контроля над анимациями. Я < /p>
Я проверил разные чат -боты ИИ, чтобы отладить, но они продолжали отрыгать одно и то же. Я даже искал разные способы, чтобы анимировать модалы увольнения, но не нашел ничего подобного.

Подробнее здесь: https://stackoverflow.com/questions/795 ... -dismissal