本文详解如何修复纯 css 导航菜单在关闭时无过渡动画的问题，通过正确使用 `:checked` 伪类、`transition` 属性及合理的 dom 结构控制 opacity 和 width 变化，实现开闭双向平滑动画。
在纯 CSS 实现的汉堡菜单中，常见误区是仅对 :checked 状态设置过渡样式，却忽略了未选中状态（即关闭时）同样需要可动画的初始值与过渡声明。问题核心在于：CSS 过渡（transition）仅在元素属性值发生有效变化时触发；若关闭时目标元素被设为 display: none、visibility: hidden 或 opacity: 0 但未声明 transition，或其父容器宽度突变为 0 而未启用过渡，则动画将失效。
✅ 正确实现逻辑
关键点有三：
- 所有参与动画的属性必须显式声明 transition（如 opacity、width、visibility 需配合 transition-delay 使用）；
- :not(:checked) 写法无效——CSS 中不存在 :not(checked) 伪类，正确写法是 :not(:checked)，但更推荐直接设置默认样式（即未勾选时的状态），再用 :checked 覆盖；
- visibility 与 opacity 需协同控制：visibility: hidden 会阻止交互且无法过渡，应先设 visibility: visible + opacity: 0 作为默认关闭态，再通过 :checked 切换为 opacity: 1；关闭时依靠 transition 自动回退。
以下是精简可靠的解决方案（已验证兼容主流浏览器）：
/* 导航容器：默认完全隐藏，但保留可过渡性 */
.navigation__nav {
position: fixed;
top: 0; left: 0;
width: 0;
height: 100vh;
background-color: #fff;
opacity: 0;
visibility: hidden; /* 避免关闭时仍可交互 */
transition:
width 0.5s ease,
opacity 0.5s ease,
visibility 0s linear 0.5s; /* 延迟隐藏以确保 opacity 动画完成 */
}
/* 开启时：展开宽度 + 显示内容 */
.navigation__checkbox:checked ~ .navigation__nav {
width: 100%;
opacity: 1;
visibility: visible;
transition-delay: 0s; /* 移除延迟，立即开始 */
}
/* 菜单项：统一控制淡入淡出 */
.navigation__list {
opacity: 0;
transition: opacity 0.5s ease 0.2s; /* 稍延后启动，营造层次感 */
}
.navigation__checkbox:checked ~ .navigation__nav .navigation__list {
opacity: 1;
}⚠️ 注意事项
- 避免 display: none：它不可过渡，会导致瞬间消失。改用 visibility: hidden + opacity: 0 组合；
- transition-delay 的妙用：关闭时给 visibility 添加延迟（如 0.5s），确保 opacity 动画结束后再隐藏，防止闪烁或点击穿透；
- HTML 结构必须严格匹配：.navigation__checkbox 必须位于 .navigation__nav 之前，且使用兄弟选择器 ~ 才能生效（如示例中 <input> 在 <nav> 之前）；
- 移动端适配建议：为 .navigation__nav 添加 pointer-events: none 默认态，:checked 时设为 auto，避免关闭状态下误触。
✅ 最终效果
点击图标 → 菜单从右向左滑入（宽度扩展 + 淡入）→ 再次点击 → 菜单平滑缩回并淡出，全程无跳变、无卡顿。
通过精准控制 CSS 过渡链与状态切换时机，无需 JavaScript 即可实现专业级双向往返动画。记住：过渡不是“自动补间”，而是对两个明确状态间变化过程的描述——你必须定义好「开始」和「结束」，CSS 才能帮你优雅地连接它们。
