переключать текст исчезать, когда навигация открывается и закрывается

Question

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

Может быть jQuery переключить? или что-то в CSS я могу сделать?

Codepen: https://codepen.io/mattmcgilton/pen/GRJVBxz

         <div class="col-4 d-flex flex-column align-items-end">
           <button id="open-btn" onclick="openNav()">Menu</button>
         </div>    


         <nav class="primary__nav">
            <div id="myNav" class="overlay">
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>
            <div class="container overlay-content">
              <ul>
                 <li>this is text 123</li>
                 <li>this is text 123</li>
                 <li>this is text 123</li>
                 <li>this is text 123</li>
              </ul>
            </div>
           </div>
         </nav>

function openNav() {
  document.getElementById("myNav").style.width = "100%";
  document.getElementById("open-btn").style.display = "none";
}

function closeNav() {
  document.getElementById("myNav").style.width = "0%";
  document.getElementById("open-btn").style.display = "block";
}

body {
  background-color: gray;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: red;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  margin-top: 30px;

  ul {
    padding-left: 0;

    li {
      padding-bottom: 5rem;
    }
  }
}

.overlay a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 30px;
  color: red;
  display: block;
  transition: 0.3s;
  letter-spacing: 5px;
  @include bodyLight();
}

.overlay .closebtn {
  position: absolute;
  top: 50px;
  right: 70px;
  @include bodyBold();
  font-size: 12px;
  color: black;
}

Answer 1

Если я правильно понял ваше требование, вы хотите, чтобы слайдер таймера входил и выходил? если это так, вы должны правильно установить таймер в классе 'overlay. В настоящее время я установил его на 2 секунды.

function openNav() {
  $(".overlay-content").fadeIn(2000);
  document.getElementById("myNav").style.width = "100%";
  document.getElementById("open-btn").style.display = "none";

}

function closeNav() {
  $(".overlay-content").fadeOut(500);
  document.getElementById("myNav").style.width = "0%";
  document.getElementById("open-btn").style.display = "block";

}

body {
  background-color: gray;
}

elementToFadeInAndOut {
  animation: fadeInOut 4s linear forwards;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: red;
  overflow-x: hidden;
  transition: 2s;
  /* here */
}

.overlay-content {
  position: relative;
  top: 25%;
  margin-top: 30px;
  display:none;
  ul {
    padding-left: 0;
    li {
      padding-bottom: 5rem;
    }
  }
}

.overlay a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 30px;
  color: red;
  display: block;
  transition: 0.3s;
  letter-spacing: 5px;
  @include bodyLight();
}

.overlay .closebtn {
  position: absolute;
  top: 50px;
  right: 70px;
  @include bodyBold();
  font-size: 12px;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col-4 d-flex flex-column align-items-end">
  <button id="open-btn" onclick="openNav()">Menu</button>
</div>


<nav class="primary__nav">
  <div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>
    <div id="hide" class="container overlay-content">
      <ul>
        <li>this is text 123</li>
        <li>this is text 123</li>
        <li>this is text 123</li>
        <li>this is text 123</li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

Я сделал простую постепенную анимацию, которую вы можете прикрепить к любому элементу через класс (element.classList.add("fadeIn")) при открытии навигационной панели и ее удалении (element.classList.remove("fadeIn")) при закрытии навигационной панели. Для немедленного сокрытия текста вы можете создать класс hidden, который будет иметь display: none, и использовать его таким же образом.

.fadeIn{
  animation: fadeIn 1s ease-in;
}


@keyframes fadeIn{
  from {
    opacity:0
  }
  to {
    opacity:1
  }
}