动画导航栏、菜单、侧边栏或寻路元素时…

适用于为导航栏、菜单、侧边栏或寻路元素添加流畅且符合直觉的过渡动画。

适用场景

解决思路

1. 压缩与伸展：菜单项点击时可轻微压缩；移动端汉堡图标线条在变形为 X 时应压扁。
2. 预备动作：下拉菜单打开前，触发项可上抬或高亮；侧边栏切换图标在面板滑出前轻微旋转。
3. 舞台布置：激活的导航项应清晰区分；下拉菜单通过 z-index 和阴影出现在其他内容上方；保持焦点层级。
4. 直接动作与姿势到姿势：定义清晰状态：关闭、打开中、打开、关闭中；每个菜单项有默认、悬停、激活、选中姿态。
5. 跟随与重叠动作：下拉项依次错开进入，每项延迟 20-30ms；子菜单箭头在文本稳定后旋转；激活指示器滑动时带轻微过冲。
6. 缓入与缓出：菜单打开用 ease-out；菜单关闭用 ease-in；悬停过渡用 ease-in-out；Material 风格使用 cubic-bezier(0.4, 0, 0.2, 1)。
7. 弧线：移动端导航从侧边滑入时应带轻微弧线；菜单指示器在项目间滑动时可沿细微曲线路径。
8. 次要动作：当下拉菜单展开（主操作）时，阴影增长（次操作），父项保持高亮（第三操作）；chevron 旋转。
9. 时间节奏：下拉打开 200-250ms；下拉关闭 150-200ms；悬停高亮 100-150ms；激活指示器滑动 200-300ms；每项错开 20-40ms；汉堡变形 300ms。
10. 夸张：激活指示器可以过冲并回弹；重要导航项可以短暂脉冲以吸引注意；mega menus 值得大胆入场。
11. 扎实绘图：动画过程中保持一致间距；阴影应一致；图标在所有动画帧保持清晰。
12. 吸引力：让导航动画平滑、响应干脆，因为导航被频繁使用，应投入这些微交互。
13. CSS 实现 .nav-dropdown：transform-origin: top; transition: transform 200ms ease-out, opacity 200ms ease-out;
14. CSS 实现 .nav-dropdown.open：transform: scaleY(1); opacity: 1;
15. CSS 实现 .nav-indicator：transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
16. 使用 transform：translateX/Y、scaleY、rotate。
17. 使用 opacity：淡入淡出菜单。
18. 使用 height/max-height：手风琴菜单。
19. 使用 clip-path：揭示效果。
20. 使用 transform-origin：控制下拉方向。

适用边界 · 注意事项

• 不适用于非导航、菜单、侧边栏或寻路元素的交互动画。
• 若设备性能受限或需要严格减少动效，避免使用过冲、脉冲、错开等夸张效果。