移动端点击汉堡图标触发菜单40%到80%宽度3s过渡的Vanilla JS实现问题

核心问题根因 #

• 当前实现无法触发过渡，本质是三个原因：
  • CSS过渡需要主动声明监听的属性与动画时长，原代码没有给ul加对应的transition规则，浏览器不会自动给宽度变化加动画
  • 原有逻辑里ul的宽度被硬编码为40%，没有对应的状态切换来触发宽度变化，自然没有动画效果
  • 原有代码存在变量引用错误：点击退出按钮的逻辑里写了exit.classList.toggle，但代码里只定义了exitBtn变量，没有全局的exit变量，运行时会直接报错中断逻辑

代码修改方案 #

1. 调整CSS部分 #

在原有移动端媒体查询的基础上，补充过渡规则与展开状态类，原有样式不需要大改：

@media only screen and (max-width: 375px) {
  .hide-mobile {
    display: none;
  }

  body {
    background-color: rgb(126, 115, 228);
  }

  ul {
    background-color: red;
    width: 40%; /* 菜单初始/收起状态宽度 */
    height: 1000px;
    position: relative;
    left: 206px;
    bottom: 107px;
    /* 新增：宽度过渡规则，动画时长按需求设为3秒 */
    transition: width 3s ease;
  }

  /* 新增：菜单展开状态的宽度规则 */
  ul.menu-open {
    width: 80%;
  }

  /* 以下原有样式保持不变即可 */
  hr {
    width: 30px;
    height: 2px;
    background-color: black;
    border-radius: 5px;
  }

  .hr-lines {
    border: 1px solid black;
    width: 45px;
    position: relative;
    left: 300px;
    top: 10px;
    cursor: pointer;
  }

  .exit-btn {
    cursor: pointer;
    font-size: 25px;
    position: relative;
    left: 305px;
    top: 10px;
    border: 1px solid black;
    padding: 0 10px 8px 10px;
    z-index: 1;
  }
}

2. 调整JS部分 #

修复原有变量引用的bug，补充ul的类切换逻辑：

const nav = document.querySelector("nav");
const exitBtn = document.getElementById("exit");
const hrLines = document.querySelector(".hr-lines");
const ul = document.querySelector("ul");

/* 点击汉堡图标触发逻辑 */
hrLines.addEventListener("click", function () {
  nav.classList.toggle("hide-mobile");
  exitBtn.classList.toggle("hide-mobile");
  hrLines.classList.toggle("hide-mobile");
  /* 新增：切换ul的展开状态类，触发宽度从40%到80%的3秒过渡 */
  ul.classList.toggle("menu-open");
});

/* 点击退出按钮触发逻辑 */
exitBtn.addEventListener("click", function () {
  nav.classList.toggle("hide-mobile");
  /* 修复原代码bug：将错误的exit引用改为已定义的exitBtn变量 */
  exitBtn.classList.toggle("hide-mobile");
  hrLines.classList.toggle("hide-mobile");
  /* 移除ul的展开状态类，触发从80%回到40%的反向过渡 */
  ul.classList.remove("menu-open");
});

HTML部分 #

原有结构不需要做任何修改即可正常运行。

实现效果说明 #

• 点击汉堡图标时，导航从隐藏状态显示，此时ul初始宽度为40%，会在3秒内平滑过渡到80%宽度
• 点击退出按钮时，导航隐藏，同时ul回到40%宽度的初始状态，再次打开时可重复触发过渡动画

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