如何确保菜单关闭时立即消失，而不是部分消失？

Question

我做了一个菜单，但是当关闭时，它会部分消失。首先，所有项目都被拉伸到窗口的宽度并从上到下，然后背景消失，然后是名称，它发生得很快，但是这一秒看起来很丑陋。 代码中没有动画。桌面版和移动版都会出现这种情况。

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

完整的蓝色镜头，也许它可以帮助你解决这个问题：

我的猜测是，当用户打开/关闭菜单时，您会在 nav 标记中删除或添加一个类。当用户关闭菜单时，覆盖height: 100vh 的类会被移除，因此它可能会拉伸到100%，然后使用transition: all 0.15s linear; 淡出到visibility: hidden;

你能提供菜单是如何打开/关闭的吗？是否增加了额外的类？

编辑：

查看 codepen 后，我可能发现了问题，请查看我的 altered version。它是visibility: hidden/visible 和您使用的transition 的组合。从 ul 中删除 showMenu 类时，您设置了 visibility: hidden。由于您将转换设置为 li，当您从父 ul 中删除 showMenu 类时，它将尝试从 visibility: visible 转换为 visibility: hidden。 尝试将 li 设置为默认 visibility: hidden 并添加 ul.showMenu li {visibility: visible;} 以仅在打开菜单并将类添加到父 ul 时显示 li。

列表项拉伸到全宽的原因是你设置width: 300px只有当父ul有类.showMenu。当通过单击菜单切换删除类时，宽度属性不适用，因为 ul.showMenu 选择器不再匹配。结合 0.15s 的过渡，您会看到 li 拉伸到 100% 宽度，因为它们是在过渡到 visibility: hidden 之前的块级元素，并且它们不再显示。 尝试通过设置独立于菜单状态的 li 宽度来解决此问题。

这些是重要的变化：

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)
}