CSS-навигация появляется/исчезает при анимации щелчка не работает ⇐ CSS

[Anonymous]

Мне нужна ваша помощь, я проверил всю документацию, но не нашел решения. У меня есть простая HTML-навигация. В CSS у меня есть анимация появления и исчезновения. Затухание работает отлично, а затухание не работает. Я перепробовал миллион вещей, но ничего не получается.

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

    

[img]/media/yogism_logo_header.svg[/img]



[img]/media/hamburger_nav.svg[/img]

[list]
[*][url=#]Features[/url]
[*][url=#]About Us[/url]
[*][url=#]Testimonial[/url]
[*][url=#]Pricing[/url]
[*][url=#]Blog[/url]
[/list]

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

  .mobile-nav {
display: block;
width: 100%;
background-color: var(--neutral-1000);
z-index: 1000;
position: absolute;
top: 0;
left: 0;
}

.mobile-nav.open {
animation: slideDown 0.3s ease forwards;
}

.mobile-nav.close {
animation: slideUp 0.3s ease forwards;
}

@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}

@keyframes slideUp {
from {
transform: translateY(0);
}
to {
transform: translateY(-100%);
}
}

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

document.addEventListener("DOMContentLoaded", function () {
const hamburgerMenu = document.getElementById("hamburger-menu");
const mobileNav = document.querySelector(".mobile-nav");

hamburgerMenu.addEventListener("click", function () {
if (mobileNav.classList.contains("open")) {
mobileNav.classList.remove("open");
mobileNav.classList.add("close");
} else {
mobileNav.classList.remove("close");
mobileNav.classList.add("open");
}
const menuIcon = document.getElementById("menu-icon");
menuIcon.src = mobileNav.classList.contains("open")
? "/media/cross_nav.svg"
: "/media/hamburger_nav.svg";
});
});

Класс переключается. Когда страница загружается в первый раз, класса нет:

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

class="mobile-nav"

Когда я нажимаю на него, он открывается с анимацией и выглядит следующим образом:

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

class="mobile-nav open"

Когда я нажимаю на него еще раз, навигация просто исчезает без анимации, HTML становится таким:

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

class="mobile-nav close"

Когда я нажимаю на него еще раз, он снова открывается С анимацией:

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

class="mobile-nav open"

Кто-нибудь может помочь в это пасхальное воскресенье?

Подробнее здесь: https://stackoverflow.com/questions/782 ... s-not-work