如何实现移动端菜单的平滑淡入淡出切换效果（含事件监听防重复绑定）-html教程-PHP中文网

如何实现移动端菜单的平滑淡入淡出切换效果（含事件监听防重复绑定）

本文详解如何通过 JavaScript 控制移动端菜单的显示/隐藏状态，并配合 CSS 动画实现 fade-in/fade-out 效果；重点解决因重复绑定 animationend 事件监听器导致的第三次点击异常问题。

本文详解如何通过 javascript 控制移动端菜单的显示/隐藏状态，并配合 css 动画实现 fade-in/fade-out 效果；重点解决因重复绑定 `animationend` 事件监听器导致的第三次点击异常问题。

在构建响应式移动端导航菜单时，一个常见需求是：点击按钮后，主内容区域（#mainBody）隐藏，菜单面板（#mobileMenu）以淡入动画展开；再次点击则菜单淡出，主内容恢复显示。看似简单，但若未妥善处理 DOM 状态与事件绑定逻辑，极易出现「第三次点击失效」「双元素同时消失」「动画卡顿」等问题——正如你所遇到的：前两次正常，第三次仅触发 fadeIn 且 mainBody 和 mobileMenu 全部消失。

根本原因在于：每次执行 mobileMenuToggle() 时，你都在 else if 分支中重复添加了 animationend 监听器，而未移除旧监听器。随着点击次数增加，多个监听器被累积注册，导致 mobileMenu.style.display = "none" 被多次执行，甚至可能在错误时机触发（例如 fade-in 过程中误触发），破坏状态同步。

✅ 正确做法是使用 addEventListener 的 { once: true } 选项 —— 它确保监听器仅执行一次，动画结束即自动解绑，彻底避免重复注册风险。同时，display: "block" 在触发 fadeOut 前无需显式设置（因其当前已是 "block"），冗余赋值反而可能干扰 CSS 动画的起始状态判断。

以下是优化后的完整实现：

<!-- HTML 结构示例 -->
<button id="menuToggle">☰ Menu</button>
<nav id="mobileMenu" style="display: none; opacity: 0;"><a href="#home">首页</a>
  <a href="#about">关于</a>
  <a href="#contact">联系</a>
</nav><main id="mainBody"><h1>主内容区域</h1>
  <p>此处为页面主要内容...</p>
</main>

/* CSS 动画定义 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

#mobileMenu {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

// 优化后的 JS 逻辑
function mobileMenuToggle() {
  const menu = document.getElementById("mobileMenu");
  const body = document.getElementById("mainBody");

  if (menu.style.display === "none") {
    // 淡入：显示菜单，隐藏主体
    menu.style.display = "block";
    menu.style.animationName = "fadeIn";
    body.style.display = "none";
  } else {
    // 淡出：显示主体，触发菜单淡出动画
    body.style.display = "block";
    menu.style.animationName = "fadeOut";

    // ✅ 关键修复：使用 { once: true } 防止重复监听
    menu.addEventListener("animationend", () => {
      menu.style.display = "none";
      menu.style.animationName = ""; // 可选：重置动画名，避免后续干扰
    }, { once: true });
  }
}

// 绑定事件（建议在 DOM 加载完成后执行）
document.getElementById("menuToggle").addEventListener("click", mobileMenuToggle);

? 注意事项与最佳实践：

不要依赖 element.style.display 判断可见性（它仅读取内联样式）；如需更健壮的状态管理，建议改用 getComputedStyle(menu).display 或添加自定义 data-state="open/closed" 属性。
animation-fill-mode: forwards 必须设置在 CSS 中，否则动画结束后元素会恢复初始 opacity，导致视觉闪烁。
若菜单需支持键盘访问（如 Esc 关闭），可额外监听 keydown 事件增强可访问性。
动画过程中避免频繁操作 display，优先使用 opacity + visibility 或 transform 实现高性能过渡。