Модальная анимация не работает при увольнении [закрыто] ⇐ CSS

[Anonymous]

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

const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('button.close');
const brandElement = document.querySelector('a.brand');

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');

const handleAnimationEnd = (e) => {
if (e.animationName === 'pop-down') {
console.log('Event fired');
modal.classList.remove('hide');
modal.classList.add('hidden');
}
};

modal.addEventListener('animationend', handleAnimationEnd, {
once: true
});
}
}

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

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

window.addEventListener('click', (e) => {
if (e.target == modal) {
toggleModal(false);
}
})< /code>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #F8F9FA;
position: relative;
}

.navbar {
padding: 1rem;
backdrop-filter: blur(1.8px);
border-bottom: 2px black;
border-bottom-left-radius: 50px 10px;
}

a.brand {
font-family: "Monoton", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 2rem;
text-decoration: none;
color: gray;
}

a.brand:hover {
color: #2d3135;
}

/* MODAL STYLING */
.container {
display: flex;
}

.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 {
animation: pop-down 0.5s ease-in;
}

.hidden {
display: none !important;
}

.modal-content {
background-color: white;
width: 70vw;
max-width: 90%;
padding: 2rem;
}

.container {
display: flex;
}

@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>








IO

Hello



Close

Modal content






< /code>
< /div>
< /div>
< /p>
После проверки модального элемента после увольнения я обнаружил, что анимация не была отстранена, но она не играла. src = "https://i.sstatic.net/26p4veum.png"/>
Я проверил и ничего не нашел по этому поводу. Я мог бы просто анимировать с переходами, но я хочу больше контроля над анимациями. Я даже искал разные способы анимировать модалы увольнения, но не нашел ничего подобного.>

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