keyframe animation not playing after clicking link

Question

I have a full screen drop down menu that goes up and down the screen when the user interacts with the menu button. I didn't like that the full screen menu animates when the page loads so I set the opacity of the menu to 0 so that you wouldn't see the animation when the page loads. I created an onclick event that sets the opacity to 1 when the user clicks on the menu. that solved the issue of seeing the animation when the user loads the index page. here's the code for how I did it:

HTML

<div class="menu">
    <input type="checkbox" class="toggler" onclick="document.getElementById('overlay').style.opacity='1'">

    <div class="icon">
        <div></div>
    </div>
    
    <div class="overlay" id="overlay">

        <nav>
            <div id="nav-links"></div>
        </nav>
    </div>
</div>

CSS

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

100% {
    transform: translateY(0%)
    }
}

@keyframes slideUp {
0% {
    transform: translateY(0%)
    }

100% {
    transform: translateY(-100%);
    }
}

.overlay {
position: fixed;
background: var(--taupe-color);
opacity: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.menu .toggler:checked ~ .overlay {
animation: slideDown 2s forwards;
}

.menu .toggler:not(:checked) ~ .overlay {
animation: slideUp 2s forwards;
}

The only issue now is that when the user clicks on a link to navigate to another page from the menu, the menu no longer animates up. My guess is that on page load, the opacity over the overlay menu is set back to 0 so we can't see the animation actually happening on the other pages. My only idea to fix this is to duplicate the overlay class for the other pages and give it a different name but set the opacity to 1. I'm wondering if there is a better solution than the one I came up with. Ideally, the animation only happens when a link is clicked in the menu or when the menu button is toggled.

EDIT is there a way to have the menu animate only when the user clicks the menu button or clicks one of the nav links in the menu?

Answer 1

I would suggest maybe adding a class to turn the opacity to 1 upon clicking?

I'm not sure if this is what you are looking for, but here is Codepen that I believe does what you're looking for:

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

100% {
    transform: translateY(0%)
    }
}

@keyframes slideUp {
0% {
    transform: translateY(0%)
    }

100% {
    transform: translateY(-100%);
    }
}

.overlay {
position: fixed;
background: var(--taupe-color);
opacity: 0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}

.active {
  opacity:1;
}

.menu .toggler:checked ~ .overlay {
animation: slideDown 2s forwards;
}

.menu .toggler:not(:checked) ~ .overlay {
animation: slideUp 2s forwards;
}

<div class="menu">
    <input type="checkbox" class="toggler" onclick="document.getElementById('overlay').classList.add('active')">

    <div class="icon">
        <div></div>
    </div>
  
    
    <div class="overlay" id="overlay">

        <nav>
            <div id="nav-links"></div>
          TESTTTTTTTTTTTT
        </nav>
    </div>
</div>