How can I make sure that when the menu is closed, it disappears immediately, and not in parts?

Question

I made a menu, but when closed, it disappears in parts. First, all the items are stretched to the width of the window and go from top to bottom, then the background disappears, then the names, it happens quickly, but this one second looks very ugly. There are no animations in the code. This happens in both desktop and mobile versions.

GIF for ease of understanding

.nav {
  height: 100vh;
  margin-left: calc(20% - 100px);
  position: relative;
  outline: none;
}

.nav ul {
  list-style: none;
  padding: 0.5em 0;
  margin: 0;
}

.nav ul li {
  margin: 10px;
  height: 40px;
  line-height: 40px;
  background-color: white;
  padding: 0.5em 1em 0.5em 1em;
  font-size: 24px;
  -webkit-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
  border-radius: 5px;
  border: 1px solid black;
  opacity: 0.75;
}

.nav li a {
  display: block;
  text-align: center;
  padding-left: 0.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.menu {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "home home" "gallery ut" "journal contact";
  -ms-grid-rows: 65px 10px 65px 10px 65px;
  grid-template-rows: 65px 65px 65px;
  -ms-grid-columns: 365px 10px 365px;
  grid-template-columns: 365px 365px;
  grid-gap: 10px;
  height: 100vh;
  position: relative;
  z-index: 5;
}

.home .icon {
  background: url(#) no-repeat;
  background-size: contain;
}

.gallery .icon {
  background: url(#) no-repeat;
  background-size: contain;
}

.ut .icon {
  background: url(#) no-repeat;
  background-size: contain;
}

.journal .icon {
  background: url(#) no-repeat;
  background-size: contain;
}

.contact .icon {
  background: url(#) no-repeat;
  background-size: contain;
}

.icon {
  margin-left: -0.25em;
}

.home {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: home;
}

.gallery {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: gallery;
}

.ut {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: ut;
}

.journal {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: journal;
}

.contact {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: contact;
}

.menu li:hover {
  background-color: #ffffff;
  opacity: 1;
}

#menu-toggle {
  width: 65px;
  height: 65px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

#menu-toggle:hover .bar {
  width: 25px;
}

#menu-toggle.closeMenu .bar {
  width: 25px;
}

#menu-toggle.closeMenu .bar:first-child {
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

#menu-toggle.closeMenu .bar:nth-child(2) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

#menu-toggle.closeMenu .bar:last-child {
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

.bar {
  width: 25px;
  height: 2px;
  background: #fff;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.bar:nth-child(2) {
  margin: 5px 0;
}

@media screen and (max-width: 1023px) {
  .menu {
    display: block;
    background-image: url(#);
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    visibility: hidden;
  }
  .menu.showMenu1 {
    visibility: visible;
  }
  #menu-toggle {
    display: -webkit-box;
    display: flex;
    position: relative;
    z-index: 6;
  }
  .nav {
    margin-left: 0;
  }
  ul.showMenu {
    padding-top: 5em;
    visibility: visible;
  }
  ul.showMenu li {
    width: 300px;
    margin: 0 auto;
  }
  ul.showMenu span {
    text-align: right;
  }
  ul.showMenu li a {
    background-color: white;
    color: rgb(0, 0, 0);
    opacity: 0.75;
  }
}

<nav class="nav" role="navigation">
  <div id="menu">
    <div id="menu-toggle">
      <div id="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
    <ul class="menu">
      <li class="home"><a class="icon" href="#"><span>home</span></a></li>
      <li class="gallery"><a class="icon" href="#"><span>gallery</span></a></li>
      <li class="ut"><a class="icon" href="#"><span>ut</span></a></li>
      <li class="journal"><a class="icon" href="#"><span>journal</span></a></li>
      <li class="contact"><a class="icon" href="#"><span>contact</span></a></li>
    </ul>
  </div>
</nav>

Answer 1

Complete shot in the blue, maybe it helps you get that thing sorted out:

My guess is that you remove or add a class to your nav tag when a user opens / closes the menu. When the user closes the menu the class overriding height: 100vh gets removed, therefore it might stretch to 100% before fading out to visibility: hidden; with the transition: all 0.15s linear;

Can you provide how the menu gets opened / closed? Are there additional classes added?

EDIT:

After looking at the codepen I might have found the issue check out my altered version. It is a combination of visibility: hidden/visible and the transition you used. You set visibility: hidden when removing the showMenu class from the ul. Since you set the transition to the li it will try to transition from visibility: visible to visibility: hidden when you remove the showMenu class from the parent ul. Try setting the li to visibility: hidden as default and add ul.showMenu li {visibility: visible;} to show the li only when your menu is opened and the class got added to the parent ul.

The reason why the list item stretch to full width is because you set width: 300px only when the parent ul has the class .showMenu. When the class is removed by clicking on the menu toggle the width attribute does not apply because the ul.showMenu selector does not match anymore. In combination with the transition of .15s you see the li stretch to 100% width since they are block level elements before the transition to visibility: hidden is completed and they are not shown anymore. Try fixing this by setting li width independent of the menu state.

These are the important changes:

ul.showMenu {
    visibility: visible;
}
  
ul li {
    visibility: hidden;
}
ul.showMenu li {
    visibility: visible;
}
  
ul li {
    width: 300px;
    margin: 10px auto; // you override your margin declaration at one point which is why the li do not get centered)
}