mcpField
N
navigation-menus

navigation-menus

github.com/dylantarre设计与 UI132561 次安装43 周前更新
代码仓库

关于 navigation-menus

navigation-menus 是面向前端设计与开发的导航动画实践指南，将迪士尼 12 项动画原则用于菜单交互，并提供时序、状态和 CSS 属性建议。

主要功能

  1. 01将 12 项动画原则用于导航
  2. 02定义菜单开合与选中状态
  3. 03提供动画时长和错开间隔
  4. 04列出 CSS 动画属性建议

适用场景

  1. 01设计下拉菜单的开合动效
  2. 02规划移动端侧边导航动画
  3. 03调整菜单项进入和指示器滑动效果

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill navigation-menus

安装后在 Claude Code 中输入/navigation-menus确认已加载。

详细介绍

导航与菜单动画原则

将 Disney 的 12 条原则应用于导航，打造流畅、直观的寻路体验。

应用于导航的原则

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. 次要动作

下拉菜单展开时（主要动作），阴影逐渐增强（次要动作），父级菜单项保持高亮（第三动作）。箭头符号旋转。

9. 时间安排
  • 下拉菜单打开：200-250ms
  • 下拉菜单关闭：150-200ms
  • 悬停高亮：100-150ms
  • 激活指示器滑动：200-300ms
  • 每项的错开延迟：20-40ms
  • 汉堡菜单变形：300ms
10. 夸张

激活指示器可以过冲后弹回。重要的导航项可以短暂脉动以吸引注意。大型菜单应采用醒目的入场动画。

11. 扎实绘制

动画过程中保持间距一致。阴影应保持一致。图标在动画的每一帧都应保持清晰。

12. 吸引力

流畅的导航能让人感觉专业。灵敏的响应能建立信心。导航会被频繁使用，因此值得投入精力打磨这些微交互。

CSS 实现

.nav-dropdown {
  transform-origin: top;
  transition: transform 200ms ease-out,
              opacity 200ms ease-out;
}

.nav-dropdown.open {
  transform: scaleY(1);
  opacity: 1;
}

.nav-indicator {
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

关键属性

  • transform：translateX/Y、scaleY、rotate
  • opacity：淡入淡出菜单
  • height/max-height：手风琴菜单
  • clip-path：揭示效果
  • transform-origin：下拉方向

评论

支持 Markdown