本文详解如何通过 JavaScript 和 CSS 动画实现移动端菜单的点击式淡入/淡出切换，重点解决因重复绑定 animationend 事件监听器导致的第三次点击异常（如双元素消失、动画失效）问题，并提供健壮、可复用的代码方案。
本文详解如何通过 javascript 和 css 动画实现移动端菜单的点击式淡入/淡出切换，重点解决因重复绑定 `animationend` 事件监听器导致的第三次点击异常（如双元素消失、动画失效）问题，并提供健壮、可复用的代码方案。
在构建响应式移动端导航时，一个常见需求是：点击按钮后，主内容（#mainBody）隐藏，侧边菜单（#mobileMenu）以淡入动画展开；再次点击，则菜单淡出，主内容恢复显示。看似简单，但若直接在每次点击中动态添加 animationend 监听器而未清理，将引发事件监听器累积——第三次点击时，多个监听器同时触发，导致 display: none 被反复执行、状态错乱，最终出现 mobileMenu 与 mainBody 同时消失的 Bug。
✅ 正确实现要点
-
避免重复监听：使用
{ once: true }选项确保animationend回调仅执行一次，无需手动removeEventListener； -
移除冗余样式操作：淡出阶段无需先设
display: block（它已是block），否则可能干扰动画触发或造成闪烁； -
统一状态管理逻辑：基于当前
display状态做判断，但更推荐结合 CSS 类控制（如is-active），本文以原生 JS 方案为基础优化。
✅ 修复后的 JavaScript 代码
function mobileMenuToggle() {
const mobileMenu = document.getElementById("mobileMenu");
const mainBody = document.getElementById("mainBody");
if (mobileMenu.style.display === "none") {
// 淡入：显示菜单，隐藏主内容
mobileMenu.style.animationName = "fadeIn";
mobileMenu.style.display = "block"; // 触发动画
mainBody.style.display = "none";
} else if (mobileMenu.style.display === "block") {
// 淡出：显示主内容，启动淡出动画
mainBody.style.display = "block";
mobileMenu.style.animationName = "fadeOut";
// 关键修复：使用 { once: true } 防止多次绑定
mobileMenu.addEventListener("animationend", () => {
mobileMenu.style.display = "none";
mobileMenu.style.animationName = ""; // 重置动画名，便于下次复用
}, { once: true });
}
}
✅ 对应的 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;
/* 初始隐藏 */
display: none;
}
⚠️ 注意事项与最佳实践
-
不要依赖内联
style.display判断：若菜单初始由 CSS（如display: none）控制而非内联样式，element.style.display将为空字符串。更健壮的方式是使用getComputedStyle(element).display； -
动画重置建议：每次动画结束后清空
animationName（如示例中mobileMenu.style.animationName = ""），避免连续快速点击时动画属性残留； -
无障碍增强：为
#mobileMenu添加aria-hidden="true/false"并同步更新，提升屏幕阅读器支持； -
性能提示：
transform和opacity属于 GPU 加速属性，本方案已符合高性能动画原则。
通过上述修复，mobileMenuToggle() 可稳定运行任意次数，状态清晰、动画连贯，彻底规避因事件监听器泄漏引发的 UI 异常。
