Vanilla JS setTimeout(): Falsches Verhalten identifizieren

Question

Ich habe eine Animation auf meinem Hamburger-Menü, die in HTML, CSS und Vanilla-JavaScript geschrieben ist.

Erwartete Ergebnisse

Wenn Sie auf die Hamburger-Menüschaltfläche klicken, sollten die folgenden Ereignisse eintreten:

Wenn Sie auf das Hamburger-Menüsymbol klicken:

1. main 旋转 180° 并在 2000ms Die Höhe der Oberkante ist reduziert
2. bei 2000ms 通过后，菜单出现，汉堡包图标变为 X

Wenn Sie auf die Schaltfläche „Beenden“ klicken:

1. Drehen Sie die Seite um weitere 180°, um das Menü abzudecken
2. Verstecktes Menü: display: none;
3. Exit-Button wieder in Hamburger-Symbol umwandeln

Was tatsächlich passiert ist

Das Hauptproblem besteht darin, dass die Schaltfläche aufgrund des settimeout in den Zeilen 12–14 nicht verlassen werden kann. Hier ist der Codeausschnitt zum besseren Verständnis.

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

如果你的意思是退出点击只是恢复原始状态，没有动画，那是因为你已经在 .move-away 类上定义了 transition 属性，并且在退出点击时立即将其删除。

您应该将此 transition: all 2000ms escape-in​​-out; 移至 main 样式（CSS 文件中的第 14 行）以使动画双向工作