Javascript 重新调整窗口大小后手机菜单会闪烁（CSS和JS问题）

场景

我有一个移动菜单，当窗口低于736px时显示。此菜单上有一个javascript切换，用于添加和删除显示移动菜单ul（当然还有子项）的CSS类

当您重新调整窗口大小时，CSS媒体查询将从桌面菜单切换到单独的移动菜单，切换按计划工作

问题

当我重新调整窗口大小，然后打开和关闭移动菜单时，一切正常，当随后再次调整窗口大小时，当窗口再次到达CSS媒体查询断点（736px）时，移动ul和li闪烁一秒钟

我不知道如何阻止这一切的发生，这真的让我陷入了困境，我似乎在这上面花了好几个小时，但我一事无成

如果有人能在这方面帮助我，我将不胜感激

另外，如果移动菜单保持打开状态，我不介意移动菜单在重新调整大小后仍然存在——这是预期的行为。当手机菜单关闭，窗口大小调整到桌面，然后再次回到手机时，菜单闪烁

代码笔：

JS

CSS

HTML

菜单

我刚刚删除了下面的代码，它成功了，可能是因为您正在CSS和JS文件中处理相同的事件

@keyframes removeMobileMenu {
  0% {opacity: 1; transform: scaleY(1);}
  99% {opacity: 0; transform: scaleY(1);}
  100% {opacity: 0; transform: scaleY(0);}
}

---

我希望动画动画不只是消失，所以这不是一个选项。

body, ul {padding: 0; margin: 0}

#main-header {width: 100%; height: 100px;}

/* desktop navigation */
#main-navigation {
  position: relative;
  width: 100%;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 5% 10px 5%;
  align-items: center;
}

#logo-holder {
  width: 150px;
  height: 66px;
  background-color: grey;
}

ul#nav-menu-items {
  display: flex;
  margin-left: auto;
}

#main-navigation ul li {list-style-type: none;}

#main-navigation ul#nav-menu-items li a {
  padding: 10px 15px;
  margin: 0 5px;
  box-sizing: border-box;
  background: yellow;
  text-decoration: none;
  color:#000;
}

#main-navigation ul#nav-menu-items li a:hover {
  color:blue;
  transition: color .25s;
}

#mobile-menu-button, ul#mobile-nav-menu-items {
  display: none;
}

/* --- MOBILE MENU AND DROPDOWN  ---
Below is a separate menu added for mobiles.
*/

@media screen and (max-width : 736px) {

/*  hides desktop menu  */

  ul#nav-menu-items {display: none}

  #mobile-menu-button {
    display: flex;
    justify-content: center;
    background: blue;
    color: white;
    padding: 10px 15px;
    min-width: 75px;
    cursor: pointer;}

  ul#mobile-nav-menu-items {
    opacity: 0;
    transform: scaleY(0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
    background: blue;
    position: absolute;
    right: 5%;
    top: 100px;
    padding: 10px 0px;

  }

  ul#mobile-nav-menu-items li {
    padding: 10px 10px;
  }

  ul#mobile-nav-menu-items li a {
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    transition: color .3s; 
  }

  ul#mobile-nav-menu-items li a:hover {
    color: lightblue;
  }

/* -------- MOBILE CLASSES ADDED WITH JavaScript*/

#mobile-nav-menu-items.mobileMenuActive {
  animation: showMobileMenu .5s ease-in forwards;
}

@keyframes showMobileMenu {
  0% {opacity: 0;transform: scaleY(0);}
  1% {opacity: 0; transform: scaleY(1);}
  100% {opacity: 1; transform: scaleY(1);}
}

#mobile-nav-menu-items.mobileMenuInactive {
  animation: removeMobileMenu .5s ease-out forwards;
}

@keyframes removeMobileMenu {
  0% {opacity: 1; transform: scaleY(1);}
  99% {opacity: 0; transform: scaleY(1);}
  100% {opacity: 0; transform: scaleY(0);}
}

} /*END OF MOBILE MENU STYLING*/

<header id="main-header">
<!--   desktop nav -->
  <nav id="main-navigation"> 
    <div id="logo-holder"></div>
    <ul id="nav-menu-items">
      <li class="menu-item menu-item-1"><a href="https://www.google.com">News</a></li>
      <li class="menu-item menu-item-2"><a href="https://www.google.com">About</a></li>
      <li class="menu-item menu-item-3"><a href="https://www.google.com">Contact</a></li>
    </ul>
<!--    mobile nav -->
    <ul id="mobile-nav-menu-items">
      <li class="mobile-menu-item mobile-menu-item-1"><a href="https://www.google.com">News</a></li>
      <li class="mobile-menu-item mobile-menu-item-2"><a href="https://www.google.com">About</a></li>
      <li class="mobile-menu-item mobile-menu-item-3"><a href="https://www.google.com">Contact</a></li>
    </ul>
<!--     button for triggering mobile nav -->
    <div id="mobile-menu-button">Menu</div>

  </nav>
</header>

@keyframes removeMobileMenu {
  0% {opacity: 1; transform: scaleY(1);}
  99% {opacity: 0; transform: scaleY(1);}
  100% {opacity: 0; transform: scaleY(0);}
}