刷新页面后，汉堡切换器动画不会立即起作用

Question

汉堡切换器动画在我刷新页面后没有立即工作，它在我点击一次后开始工作。当我第一次点击 openMenu 时，主菜单出现时没有动画。我不明白在我第二次点击它之后它是如何工作的。我可能缺少一些东西。为什么会这样？

const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
    mainMenu.style.display = "flex";
    mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
    mainMenu.style.top = "-100%";
});

.row .left {
  height: 98vh;
  background-color: #5a2a19;
}

.row .right {
  height: 98vh;
  background-color: #ff640b;
}

.row .right nav .openMenu {
  font-size: 3em;
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.row .right nav .mainMenu {
  background-color: #ff640b;
  height: 100vh;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 50%;
  z-index: 10;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: top 1s ease;
  transition: top 1s ease;
  list-style: none;
}

.row .right nav .mainMenu li a {
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  color: #5a2a19;
  font-size: 1.5em;
  font-weight: bold;
}

.row .right nav .mainMenu li a:hover {
  color: #e6e8de;
}

.row .right nav .mainMenu .closeMenu {
  font-size: 2em;
  margin: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.row .right nav .mainMenu .icons i {
  display: inline-block;
  padding: 12px;
  font-size: 2.2em;
  color: #5a2a19;
  cursor: pointer;
}

.row .right nav .mainMenu .bi-facebook:hover {
  color: #4267b2;
}

.row .right nav .mainMenu .bi-instagram:hover {
  color: #e1306c;
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Bees cafe</title>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
      crossorigin="anonymous"
    ></script>
    <script src="js/index.js" defer></script>
  </head>
  <body>
    <header>
      <div class="row">
        <div class="col-12 col-md-6 left"></div>
        <div class="col-12 col-md-6 right">
          <nav>
            <div class="openMenu"><i class="bi bi-list"></i></div>
            <ul class="mainMenu">
              <li><a href="#">lala</a></li>
              <li><a href="#">lala</a></li>
              <li><a href="#">lala</a></li>
              <div class="closeMenu"><i class="bi bi-x-lg"></i></div>
              <span class="icons">
                <i class="bi bi-facebook"></i>
                <i class="bi bi-instagram"></i>
              </span>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </body>
</html>

Answer 1

如果我们在 .mainMenu 打开时将 display 设置为 flex，但在关闭时从不设置，我们不妨将其默认设置为 flex。这修复了最初的问题，但导致菜单默认打开，因此我们可以通过将关闭时添加的相同样式添加到初始 css（在 [=15 中设置 top: -100%; =]).

const mainMenu = document.querySelector(".mainMenu");
const closeMenu = document.querySelector(".closeMenu");
const openMenu = document.querySelector(".openMenu");
openMenu.addEventListener("click", () => {
    mainMenu.style.top = "0";
});
closeMenu.addEventListener("click", () => {
    mainMenu.style.top = "-100%";
});

.row .left {
  height: 98vh;
  background-color: #5a2a19;
}

.row .right {
  height: 98vh;
  background-color: #ff640b;
}

.row .right nav .openMenu {
  font-size: 3em;
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.row .right nav .mainMenu {
  background-color: #ff640b;
  height: 100vh;
  display: flex;
  position: fixed;
  top: -100%;
  right: 0;
  left: 50%;
  z-index: 10;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: top 1s ease;
  transition: top 1s ease;
  list-style: none;
}

.row .right nav .mainMenu li a {
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  color: #5a2a19;
  font-size: 1.5em;
  font-weight: bold;
}

.row .right nav .mainMenu li a:hover {
  color: #e6e8de;
}

.row .right nav .mainMenu .closeMenu {
  font-size: 2em;
  margin: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.row .right nav .mainMenu .icons i {
  display: inline-block;
  padding: 12px;
  font-size: 2.2em;
  color: #5a2a19;
  cursor: pointer;
}

.row .right nav .mainMenu .bi-facebook:hover {
  color: #4267b2;
}

.row .right nav .mainMenu .bi-instagram:hover {
  color: #e1306c;
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Bees cafe</title>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
      crossorigin="anonymous"
    ></script>
    <script src="js/index.js" defer></script>
  </head>
  <body>
    <header>
      <div class="row">
        <div class="col-12 col-md-6 left"></div>
        <div class="col-12 col-md-6 right">
          <nav>
            <div class="openMenu"><i class="bi bi-list"></i></div>
            <ul class="mainMenu">
              <li><a href="#">lala</a></li>
              <li><a href="#">lala</a></li>
              <li><a href="#">lala</a></li>
              <div class="closeMenu"><i class="bi bi-x-lg"></i></div>
              <span class="icons">
                <i class="bi bi-facebook"></i>
                <i class="bi bi-instagram"></i>
              </span>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </body>
</html>

刷新页面后，汉堡切换器动画不会立即起作用

hamburger toggler animation doesn't work immediately after refresh of page

html

javascript

css

animation

navbar