本文解决移动端导航菜单点击后“滑入动画正常、滑出动画失效”的常见问题，核心在于避免 CSS 动画因元素状态突变而被跳过，并通过合理设置初始状态、动画作用目标及 class 切换逻辑，确保 slideDown 与 slideUp 均能可靠触发。
本文解决移动端导航菜单点击后“滑入动画正常、滑出动画失效”的常见问题，核心在于避免 css 动画因元素状态突变而被跳过，并通过合理设置初始状态、动画作用目标及 class 切换逻辑，确保 `slidedown` 与 `slideup` 均能可靠触发。
在实际开发中，许多开发者会遇到这样一种典型现象：移动端汉堡菜单点击后，导航栏能顺利执行 slideDown 滑入动画，但再次点击关闭时却直接“闪退”——无任何过渡效果，仿佛 .close 类被添加后动画根本未触发。这并非浏览器 Bug，而是由 CSS 动画触发机制 与 DOM 渲染时序 共同导致的常见陷阱。
? 根本原因分析
关键问题在于：.mobile-nav 默认状态下既无 open 也无 close 类，其内部 transform: none 或 translateY(0)）。当首次添加 .open 类时，浏览器检测到 ul 的 transform 从隐式 none 变为 translateY(-200%) → 0，因此 slideDown 动画可正常播放；但当切换至 .close 时，若 transform 已是 0，而 .mobile-nav.close ul 的 @keyframes slideUp 要求 from: translateY(0) → to: translateY(-200%)，看似合理——问题在于：若该元素此前未通过动画显式设置过 transform 值，浏览器可能复用上一次动画结束态，或因样式计算时机导致 from 关键帧无法正确捕获起始值，最终跳过动画。
更深层原因是：CSS animation 不是 transition，它不会自动感知属性“变化”，而是严格依赖 class 应用瞬间的样式快照来确定 from 状态。若该快照与预期不符（例如仍为 none），动画便无法按预期运行。
✅ 正确解决方案：锚定初始状态 + 动画作用于子元素
最佳实践是将动画控制权交给 transform，确保每次动画都有清晰的起点和终点：
.mobile-nav ul {
/* 强制设定初始不可见状态 */
transform: translateY(-200%);
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav.open ul {
animation: slideDown 0.3s ease forwards;
}
.mobile-nav.close ul {
animation: slideUp 0.3s ease forwards;
}
@keyframes slideDown {
from { transform: translateY(-200%); }
to { transform: translateY(0); }
}
@keyframes slideUp {
from { transform: translateY(0); }
to { transform: translateY(-200%); }
}
✅ 优势：
始终有一个明确的transform初始值（-200%），无论.open或.close类何时添加，动画都能基于此稳定触发。
? JavaScript 逻辑优化建议
原代码中手动 remove/add open/close 易引发竞态，推荐使用 toggle() 配合条件判断，确保状态互斥：
document.addEventListener("DOMContentLoaded", function () {
const hamburgerMenu = document.getElementById("hamburger-menu");
const mobileNav = document.querySelector(".mobile-nav");
hamburgerMenu.addEventListener("click", function () {
// 统一用 toggle 控制 open 状态
mobileNav.classList.toggle("open");
// 确保 close 类与 open 互斥（避免同时存在）
if (mobileNav.classList.contains("open")) {
mobileNav.classList.remove("close");
} else {
mobileNav.classList.add("close");
}
// 图标切换（可选：改用 CSS background 切换更稳定）
const menuIcon = document.getElementById("menu-icon");
menuIcon.src = mobileNav.classList.contains("open")
? "/media/cross_nav.svg"
: "/media/hamburger_nav.svg";
});
});
? 进阶提示：如需更高稳定性，可将图标完全交由 CSS background-image 控制（如答案中所示），避免因图片加载延迟或路径错误导致视觉不同步。
⚠️ 注意事项与调试技巧
-
勿对
display: none/block元素应用动画：display切换会强制重排，中断动画。应始终使用opacity、transform、visibility等可动画属性。 -
检查 DevTools 中的 Computed Styles：点击
.mobile-nav.close ul，确认transform是否在动画开始前已为none—— 若是，说明初始transform: translateY(-200%)未生效，需检查 CSS 优先级或是否被其他规则覆盖。 -
动画
forwards很关键：确保动画结束后样式保持在to状态，否则下一次动画可能因起始值错乱而失败。 -
移动端慎用
height动画：height: 0 → auto无法动画，transform是更可靠的选择。
通过以上结构化调整，你的导航菜单将实现真正对称、平滑、可预测的滑入/滑出交互动画，兼顾性能与用户体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
