Vanilla JS setTimeout() : identifier un mauvais comportement

Question

J'ai une animation sur mon menu hamburger écrite en HTML, CSS et Vanilla JavaScript.

Résultats attendus

Lorsque vous cliquez sur le bouton du menu hamburger, les événements suivants devraient se produire :

Lorsque vous cliquez sur l'icône du menu hamburger :

1. main 旋转 180° 并在 2000ms La hauteur du bord supérieur est réduite
2. à 2000ms 通过后，菜单出现，汉堡包图标变为 X

Lorsque vous cliquez sur le bouton Quitter :

1. Faites pivoter la page de 180° supplémentaires pour couvrir le menu
2. Menu caché : display: none;
3. Convertir le bouton de sortie en icône de hamburger

Que s'est-il réellement passé

Le principal problème est l'impossibilité de quitter le bouton à cause du settimeout sur les lignes 12 à 14. Voici l'extrait de code pour une meilleure compréhension.

var exitButton = document.getElementById("exit-button");


var exitButtonOnClick = function() {
  mobileMenu.classList.add("hidden");
}
var mobileMenuButton = document.getElementById("mobile-menu-enter");
var mobileMenu = document.getElementById("mobile-menu-id");
var mainContent = document.getElementById("main-content")

var mobileMenuButtonOnClick = function() {
  mainContent.classList.toggle("moved-away")
  setTimeout(function() {
    mobileMenu.classList.toggle("hidden");
  }, 2000);




  if (mobileMenu.classList.contains("hidden")) {
    mobileMenuButton.innerHTML = "<div class='line'></div><br><div class='line'></div><br><div class='line'></div>";

  }


};

mobileMenuButton.addEventListener("click", mobileMenuButtonOnClick);

* {
  margin: 0;
  box-sizing: border-box
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

main {
  z-index: 99;
}

.mr-0 {
  margin-right: 0;
}

.ml-auto {
  margin-left: auto;
}

.d-block {
  display: block;
}

.nav-bar {
  z-index: 99;
  background-color: rgba(204, 204, 204, 0.9);
  padding: 10px;
  position: sticky;
  top: 0;
  height: 110px !important;
}

.nav-img {
  height: 150px;
  position: relative;
  bottom: 30px;
}

.nav-options {
  float: right;
  padding-right: 50px;
  position: relative;
  top: 15px;
}

.hidden {
  display: none !important;
  opacity: 0;
  transition: all 3000ms ease-in-out;
}

.line {
  width: 50px;
  background-color: white;
  z-index: 99;
  height: 0.5px;
}

.moved-away {
  transform: rotate(180deg);
  height: 0 !important;
  transition: all 2000ms ease-in-out;
}

.mobile-nav {
  position: sticky;
  top: 0;
}

.hamburger-menu {
  background-color: transparent;
  border: none;
  position: relative;
  left: 50px;
  z-index: 99;
  top: 10px;
}

.mobile-menu {
  display: flex;
  justify-content: center;
  padding-right: 40px !important;
  min-height: fit-content !important;
  line-height: 20vh;
  background-image: url("/resources/img_5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 84vh;
  position: absolute;
  top: 95px;
  right: 0;
}

.mobile-menu li {
  width: 100%;
  display: inline-block;
}

.mobile-options {
  position: relative;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-option {
  width: 90vw;
  height: 30px;
  font-family: 'Montserrat' sans-serif;
  display: inline-block;
  background-color: rgba(204, 204, 204, 0.8);
  color: black;
  border: none;
  border-radius: 15px;
  font-size: large;
  text-align: center;
}

.exit-btn {
  min-width: 50px;
  background-color: transparent;
  border: none;
  font-size: 4rem;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  position: relative !important;
  bottom: 20px !important;
  z-index: 999999 !important;
}

<div class="nav-bar">
  <nav class="mobile-nav">
    <a href="index.html"><img src="/resources/Copy of The Coders Club.png" class="nav-img"></a>
    <div class="nav-options">
      <button class="d-block mr-0 ml-auto hamburger-menu" id="mobile-menu-enter">
                  <div class="line"></div><br>
                   <div class="line"></div><br>
                  <div class="line"></div>
                </button>
    </div>
  </nav>

  <div class="mobile-menu hidden" id="mobile-menu-id">
    <ul class="mobile-options">
      <a href="/about.html">
        <li><button class="mobile-option">About</button></li>
      </a>
      <a href="/classes.html">
        <li><button class="mobile-option" style="margin-top: 15%; margin-bottom: 15%;">Classes</button></li>
      </a>
      <a href="/contact.html">
        <li><button class="mobile-option">Contact</button></li>
      </a>
    </ul>
  </div>
</div>
<main id="main-content">
  Some content. Lorem ipsum... Hello, World!

</main>

Answer 1

Si vous voulez dire que le clic de sortie revient simplement à l'état d'origine, sans animation, c'est parce que vous avez placé l'attribut .move-away 类上定义了 transition dessus et l'avez supprimé immédiatement au clic de sortie.

Vous devez styliser ceci transition: all 2000ms escape-in​​-out; 移至 main (ligne 14 dans le fichier CSS) pour que l'animation fonctionne dans les deux sens