different CSS transition after toggleClass

Question

Salutations all

I made this pen recently https://codepen.io/alexyap/full/MmYvLw/ and I am stumped on my nav menu. It's working fine when it transitions in but looks just horrible when it fades out. I just can't figure this part out.

<div id="nav-container" class="hidden">
 <ul>
  <li id="nav1" class="hidden"><a href="#">About</a></li>
  <li id="nav2" class="hidden"><a href="#">Work</a></li>
  <li id="nav3" class="hidden"><a href="#">Contact</a></li>
 </ul>
</div>

.hidden {
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}

JS:

$("#nav-container").delay(200).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav1").delay(400).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav2").delay(600).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })

    $("#nav3").delay(800).queue(function(n){
      $(this).toggleClass("hidden")
      n()
    })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

It works fine if I take the class of hidden out from the #nav-container but it blocks my CTA button on the landing page when I do that. What I am trying to go for is after hitting the menu button which turns into an 'X', my nav menu links should transition out one after another just like when it transitions it without me having to add the class of hidden back to the #nav-container again. I'm sorry if I'm not making any sense. English is not my native language but just please try to look at my pen and you'll see what I mean.

Answer 1

One way you can do this is to put the transitions into the CSS instead and simply toggle a class on a container. We'll use the transition-delay property to handle the sequential timing effect you want. Below is an example.

Relevant HTML:

<div id="menu-overlay"></div>
<div id="menu-button-container">
  <div id="menu-button">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div id="nav-container">
  <ul>
    <li id="nav1"><a href="#">About</a></li>
    <li id="nav2"><a href="#">Work</a></li>
    <li id="nav3"><a href="#">Contact</a></li>
  </ul>
</div>

Relevant CSS:

#menu-overlay {
  position: absolute;
  height: 0;
  width: 100%;
  background: rgba(52, 73, 94,1.0);
  left: 0;
  top: 0;
  transition: .5s ease-in 1200ms;
  z-index: 2000;
}
.showing #menu-overlay {
  transition: .5s ease-in 0s;
}
.reveal {
  height: 100vh !important;
}
#nav-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
  transition-property: z-index;
  transition-delay: 1200ms;
}
.showing #nav-container {
  z-index: 2000;
  transition-delay: 0s;
}
#nav-container ul li {
  list-style: none;
  margin-left: 0;
  opacity: 0;
  visibility: hidden;
  margin-left: -60%;
}
.showing #nav-container ul li {
  opacity: 1;
  visibility: visible;
  margin-left: 0;
}
#nav1 {
  transition: 0.6s ease-in 200ms;
}
#nav2 {
  transition: 0.6s ease-in 400ms;
}
#nav3 {
  transition: 0.6s ease-in 600ms;
}

Relevant JS:

$('#menu-button').click(function(){
  $('body').toggleClass('showing');
});