导航栏动画失效的根本原因是transition未覆盖实际变化的css属性，需明确声明transform、opacity等被修改的属性，并用css变量统一控制时长和缓动函数。
导航栏切换时动画卡顿或不触发，transition 没生效？
根本原因通常是过渡属性没覆盖到实际变化的 CSS 特性上。比如只写了 transition: background-color 0.3s，但切换时改的是 transform 或 opacity，那动画就完全不会动。
- 必须确保
transition声明中包含「真正被修改的属性」，常见的是transform、opacity、max-height、height（但慎用height，它无法从0平滑过渡到auto） - 推荐写法：
transition: transform 0.25s ease, opacity 0.25s ease，明确列出所有参与动画的属性 - 如果用
max-height模拟展开收起，初始值不能是0，得设成一个极小值如max-height: 0.01px，否则浏览器会跳过过渡
用 --nav-transition-duration 这类 CSS 变量控制动画节奏
CSS 变量本身不触发动画，它只是把数值抽出来便于统一维护。关键在于：变量要被用在 transition 或 animation 的声明里，且该声明需作用于目标元素。
- 定义变量：
:root { --nav-transition-duration: 0.25s; --nav-easing: ease-out; } - 使用变量：
.nav-menu { transition: transform var(--nav-transition-duration) var(--nav-easing), opacity var(--nav-transition-duration) var(--nav-easing); } - 注意：CSS 变量不能直接用于
@keyframes内部（除非配合env()或 JS 注入），所以动画曲线和时长尽量放在transition层控制 - 修改变量后，只要对应样式重新计算（比如 class 切换、伪类激活），动画就会按新参数执行
移动端点击无响应或动画闪一下就结束？检查 :hover 和 :focus 的兼容性
纯 CSS 导航切换若依赖 :hover，在触摸设备上基本失效——因为没有“悬停”概念。很多开发者忽略了这点，导致在 iPad 或安卓 Chrome 上点不动。
- 方案一：改用
:focus-within+ 隐藏 checkbox（语义化且兼容 iOS/Android） - 方案二：用
:target配合锚点跳转（简单但 URL 会变） - 方案三：必须用 JS 时，只负责加/删 class，动画逻辑仍留在 CSS 中，例如
.nav-open .nav-menu { transform: translateY(0); opacity: 1; } - 别在
:hover里写display: block，它不支持过渡；改用visibility+opacity+transform组合
will-change: transform 要不要加？
加了可能提升动画流畅度，但也可能引发渲染层爆炸或内存占用升高，尤其在低端 Android 设备上反而更卡。
- 仅在明确观察到掉帧（用 Chrome DevTools 的 Rendering 面板确认）且动画涉及
transform/opacity时才加 - 不要全局加，也不要加在父容器上影响整个子树；精准加在正在动画的元素上，例如
.nav-menu { will-change: transform; } - 动画结束后建议移除
will-change（可通过 JS 切换 class 或用transitionend事件清理），否则浏览器会长期维持额外图层
最麻烦的地方往往不在怎么写动画，而在于怎么让动画在各种设备上都“刚好启动”——既不延迟，也不抢跑，更不因 DOM 状态未就绪而丢帧。变量只是调节旋钮，真正决定平滑与否的，是属性变更的时机和渲染管线的配合节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
