Back to Details

navigation-menus

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Navigation & Menu Animation Principles

导航与菜单动画原则

Apply Disney's 12 principles to navigation for fluid, intuitive wayfinding.
将迪士尼的12条动画原则应用于导航，实现流畅、直观的寻路体验。

Principles Applied to Navigation

应用于导航的原则

1. Squash & Stretch

1. 挤压与拉伸（Squash & Stretch）

Menu items can compress slightly on click. Mobile hamburger icon lines should squash during transformation to X.
菜单项在点击时可轻微压缩。移动端汉堡图标在转换为X形时，线条应产生挤压效果。

2. Anticipation

2. 预备动作（Anticipation）

Before dropdown opens, trigger item can lift or highlight. Sidebar toggle icon rotates slightly before panel slides.
在下拉菜单展开前，触发项可轻微上移或高亮显示。侧边栏切换图标在面板滑出前先轻微旋转。

3. Staging

3. 布局呈现（Staging）

Active nav item should be clearly distinguished. Dropdown menus appear above other content via z-index and shadow. Focus hierarchy matters.
当前激活的导航项应清晰区分。下拉菜单通过z-index和阴影显示在其他内容上方。焦点层级至关重要。

4. Straight Ahead & Pose to Pose

4. 逐帧动画与关键帧动画（Straight Ahead & Pose to Pose）

Define clear states: closed, opening, open, closing. Each menu item has default, hover, active, selected poses.
定义清晰的状态：关闭、展开中、展开、收起中。每个菜单项拥有默认、悬停、激活、选中四种状态。

5. Follow Through & Overlapping Action

5. 跟随动作与重叠动作（Follow Through & Overlapping Action）

Dropdown items stagger in (20-30ms delay each). Submenu arrows rotate after text settles. Active indicator slides with slight overshoot.
下拉菜单项依次交错出现（每项延迟20-30毫秒）。子菜单箭头在文本稳定后再旋转。激活指示器滑动时带有轻微过冲效果。

6. Ease In & Ease Out

6. 缓入缓出（Ease In & Ease Out）

Menu open: 
ease-out
. Menu close: 
ease-in
. Hover transitions: 
ease-in-out
. 
cubic-bezier(0.4, 0, 0.2, 1)
for Material-style.
菜单展开：
ease-out
菜单收起：
ease-in
悬停过渡：
ease-in-out
Material风格使用：
cubic-bezier(0.4, 0, 0.2, 1)

7. Arcs

7. 弧线运动（Arcs）

Mobile nav sliding in from side should have slight arc. Menu indicator sliding between items can follow subtle curve path.
移动端侧边栏滑入时应带有轻微弧线。菜单指示器在菜单项间切换时可沿微妙曲线路径移动。

8. Secondary Action

8. 次要动作（Secondary Action）

While dropdown expands (primary), shadow grows (secondary), parent item stays highlighted (tertiary). Chevron rotates.
当下拉菜单展开（主要动作）时，阴影逐渐扩大（次要动作），父项保持高亮（第三动作）。同时Chevron图标旋转。

9. Timing

9. 时间控制（Timing）

  • Dropdown open: 200-250ms
  • Dropdown close: 150-200ms
  • Hover highlight: 100-150ms
  • Active indicator slide: 200-300ms
  • Stagger per item: 20-40ms
  • Hamburger morph: 300ms
  • 下拉菜单展开：200-250毫秒
  • 下拉菜单收起：150-200毫秒
  • 悬停高亮：100-150毫秒
  • 激活指示器滑动：200-300毫秒
  • 菜单项延迟：20-40毫秒
  • 汉堡图标变形：300毫秒

10. Exaggeration

10. 夸张（Exaggeration）

Active indicator can overshoot and bounce back. Important nav items can pulse briefly for attention. Mega menus deserve bold entrances.
激活指示器可产生过冲后回弹效果。重要导航项可短暂脉动以吸引注意。大型菜单（Mega menus）需采用醒目入场效果。

11. Solid Drawing

11. 造型稳固（Solid Drawing）

Maintain consistent spacing during animations. Shadows should be consistent. Icons should stay crisp at all animation frames.
动画过程中保持间距一致。阴影效果需统一。图标在所有动画帧中应保持清晰锐利。

12. Appeal

12. 吸引力（Appeal）

Smooth nav feels professional. Snappy responses build confidence. Navigation is used constantly, so invest in these micro-interactions.
流畅的导航体验显专业。快速响应能建立用户信任。导航是高频交互元素，因此需重视这些微交互细节。

CSS Implementation

CSS实现

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);
}
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);
}

Key Properties

关键属性

  • transform
    : translateX/Y, scaleY, rotate
  • opacity
    : fade menus
  • height
    /
    max-height
    : accordion menus
  • clip-path
    : reveal effects
  • transform-origin
    : dropdown direction
  • transform
    : translateX/Y, scaleY, rotate
  • opacity
    : 菜单淡入淡出
  • height
    /
    max-height
    : 手风琴式菜单
  • clip-path
    : 渐显效果
  • transform-origin
    : 下拉菜单展开方向