移动端禁用导航animation/transition后关闭汉堡菜单仍有动画求助

你当前的移动端禁用过渡的规则仅作用于带有.responsive类的导航容器下的子菜单：

• 打开汉堡菜单时，.responsive类被添加到导航容器，子菜单过渡被禁用，符合预期
• 关闭汉堡菜单时，.responsive类被立即移除，此时子菜单样式回退到默认带transition: all .5s ease的规则，同时子菜单从移动端的可见状态切换为默认隐藏状态，状态变化触发了过渡动画，因此出现关闭时仍有动画的问题。

无需修改JS和HTML代码，只需要调整移动端媒体查询的CSS规则，给所有移动端场景下的子菜单统一禁用过渡即可。
在你现有的@media screen and (max-width: 600px)媒体查询块中，新增如下规则：

/* 移动端所有场景下禁用子菜单过渡效果 */
.main-nav .dropdown-content {
  transition: none !important;
}

修改后完整的媒体查询块示例：

@media screen and (max-width: 600px) {
  /* 新增规则放在最开头即可 */
  .main-nav .dropdown-content {
    transition: none !important;
  }
  /* 原有其他规则保持不变 */
  .main-nav a,
  .dropdown .dropbtn {
    display: none;
  }
  .main-nav a.icon {
    float: right;
    display: block;
  }
  .main-nav.responsive {
    position: relative;
    background-color: #000000;
    width: 100%;
  }
  /* ... 其余原有代码不需要改动 ... */
}

修改后移动设备下无论汉堡菜单是打开还是关闭状态，子菜单的过渡效果都会被完全禁用，不会再出现关闭时触发动画的问题，桌面端的下拉过渡效果不受任何影响。

内容的提问来源于stack exchange，提问作者kevin lamb