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

Posted 2023-03-06

【中文标题】如何确保菜单关闭时立即消失，而不是部分消失？

【英文标题】：How can I make sure that when the menu is closed, it disappears immediately, and not in parts?

【发布时间】：2020-12-07 18:57:11

【问题描述】：

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

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>

【问题讨论】：

很抱歉我没听清楚，你的目标到底是什么？

使菜单立即消失。而不是 gif 上的（逐渐）

这能回答你的问题吗？ CSS: Animation vs. Transition - 您可能没有使用“动画”，但您正在使用过渡，它也会为元素设置动画。

如果删除过渡，错误仍然存​​在。

在这种情况下，您需要创建一个minimal,reproducible example，以便我们可以看到正在发生的问题并能够提供帮助。

【参考方案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)

【讨论】：

是的，我将“showMenu”添加到“ul”，将“showMenu1”添加到“menu”，将“closeMenu”添加到“#menu-toggle”

但是当我只是从大尺寸减小宽度时也会发生这种情况，而不仅仅是在移动版本中关闭菜单时。