Back to Details

page-transitions

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Page Transition Animation

页面过渡动画

Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
将迪士尼的12条动画原则应用于路由切换、视图过渡和导航模式中。

Quick Reference

速查参考

PrinciplePage Transition Implementation
Squash & StretchEntering page elastic effect
AnticipationExit animation before enter
StagingHero elements bridge views
Straight Ahead / Pose to PoseShared element vs crossfade
Follow Through / OverlappingContent settles after nav
Slow In / Slow OutAsymmetric enter/exit easing
ArcSlide transitions with curve
Secondary ActionBackground, nav state changes
Timing200-500ms total transition
ExaggerationReserved for emphasis moments
Solid DrawingConsistent spatial model
AppealSmooth, oriented navigation
动画原则页面过渡实现方式
挤压与拉伸（Squash & Stretch）进入页面的弹性效果
预备动作（Anticipation）进入前先执行退出动画
舞台呈现（Staging）核心元素衔接不同视图
逐帧动画/关键帧动画（Straight Ahead / Pose to Pose）共享元素过渡 vs 交叉淡入淡出
跟随动作/重叠动作（Follow Through / Overlapping）导航完成后内容逐步稳定
缓入缓出（Slow In / Slow Out）非对称的进入/退出缓动效果
弧线运动（Arc）带曲线的滑动过渡
次要动作（Secondary Action）背景、导航状态变化
时间节奏（Timing）过渡总时长200-500ms
夸张表现（Exaggeration）仅用于需要强调的场景
立体造型（Solid Drawing）一致的空间模型
吸引力（Appeal）流畅、方向清晰的导航

Principle Applications

原则应用

Squash & Stretch: Incoming pages can have subtle elastic settle. Modal sheets bounce slightly on full open. Pull-to-navigate stretches before triggering.
Anticipation: Current page begins exit before new page enters. Slight fade or scale prepares for change. Navigation indicator updates before page swaps.
Staging: Shared/hero elements maintain context across views. Common elements (nav, footer) stay stable. New content area receives transition focus.
Straight Ahead vs Pose to Pose: Shared element transitions morph continuously (straight ahead). Crossfades swap between discrete states (pose to pose). Choose based on content relationship.
Follow Through & Overlapping: Page content settles after initial position. Staggered content entry—header, then body, then footer. Images load with subtle fade after container.
Slow In / Slow Out: Exit: ease-in (accelerate away). Enter: ease-out (decelerate in). Combined: ease-in-out for shared elements. Never linear—feels broken.
Arc: Slide transitions can curve slightly. Stack navigation implies z-depth. Circular reveals expand from trigger point.
Secondary Action: Header updates title during transition. Bottom nav indicator moves. Background color shifts. Scroll position resets with transition.
Timing: Quick transitions: 200-300ms. Standard: 300-400ms. Complex: 400-500ms. Modal/sheet: 250-350ms. Back navigation often faster than forward.
Exaggeration: Save exaggeration for key moments—onboarding, achievement. Regular navigation should be smooth, not theatrical. Users navigate frequently.
Solid Drawing: Maintain consistent spatial metaphor. If pages stack, maintain z-order. If pages slide, direction should be consistent. Users build mental model from transitions.
Appeal: Transitions should feel helpful, not impressive. Fast, smooth, oriented. Users should understand where they came from and went to.
挤压与拉伸（Squash & Stretch）：进入的页面可添加细微的弹性稳定效果。模态面板完全打开时轻微弹跳。拖拽导航触发前先产生拉伸效果。
预备动作（Anticipation）：当前页面在新页面进入前先开始退出动画。轻微的淡入淡出或缩放效果为切换做准备。导航指示器在页面切换前更新。
舞台呈现（Staging）：共享/核心元素在不同视图间保持上下文连贯性。通用元素（导航栏、页脚）保持稳定。新内容区域成为过渡的焦点。
逐帧动画 vs 关键帧动画（Straight Ahead vs Pose to Pose）：共享元素过渡为连续变形（逐帧动画）。交叉淡入淡出在离散状态间切换（关键帧动画）。根据内容关联关系选择合适方式。
跟随动作/重叠动作（Follow Through & Overlapping）：页面内容在初始位置后逐步稳定。内容分阶段进入——先头部，再主体，最后页脚。图片在容器加载完成后轻微淡入。
缓入缓出（Slow In / Slow Out）：退出时使用ease-in（加速离开）。进入时使用ease-out（减速进入）。共享元素使用ease-in-out。绝对不要使用线性动画——会显得生硬。
弧线运动（Arc）：滑动过渡可添加轻微曲线。栈式导航体现z轴深度。圆形展开效果从触发点向外扩展。
次要动作（Secondary Action）：过渡过程中更新标题。底部导航指示器移动。背景色切换。滚动位置随过渡重置。
时间节奏（Timing）：快速过渡：200-300ms。标准过渡：300-400ms。复杂过渡：400-500ms。模态框/面板：250-350ms。返回导航通常比前进导航更快。
夸张表现（Exaggeration）：仅在关键场景使用夸张效果——如引导页、成就解锁。常规导航应保持流畅，避免过于戏剧化。用户会频繁进行导航操作。
立体造型（Solid Drawing）：保持一致的空间隐喻。如果是页面堆叠，维持z轴顺序。如果是页面滑动，方向需保持一致。用户会通过过渡建立空间心智模型。
吸引力（Appeal）：过渡应实用而非炫技。快速、流畅、方向清晰。用户应能清楚知道自己从哪里来、到哪里去。

Transition Patterns

过渡模式

Crossfade (Default)

交叉淡入淡出（默认）

css
.page-exit {
    opacity: 1;
}
.page-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.page-enter {
    opacity: 0;
}
.page-enter-active {
    opacity: 1;
    transition: opacity 200ms ease-out;
}
css
.page-exit {
    opacity: 1;
}
.page-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.page-enter {
    opacity: 0;
}
.page-enter-active {
    opacity: 1;
    transition: opacity 200ms ease-out;
}

Slide (Hierarchical)

滑动过渡（层级式）

css
/* Forward navigation */
.page-enter {
    transform: translateX(100%);
}
.page-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-out;
}
.page-exit-active {
    transform: translateX(-30%);
    transition: transform 300ms ease-in;
}

/* Back navigation - reversed */
.page-enter {
    transform: translateX(-30%);
}
.page-exit-active {
    transform: translateX(100%);
}
css
/* 前进导航 */
.page-enter {
    transform: translateX(100%);
}
.page-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-out;
}
.page-exit-active {
    transform: translateX(-30%);
    transition: transform 300ms ease-in;
}

/* 返回导航 - 反向效果 */
.page-enter {
    transform: translateX(-30%);
}
.page-exit-active {
    transform: translateX(100%);
}

Shared Element (Hero)

共享元素（核心元素）

javascript
// View Transitions API
document.startViewTransition(() => {
    updateDOM();
});

// CSS for specific element
.hero-image {
    view-transition-name: hero;
}
::view-transition-old(hero),
::view-transition-new(hero) {
    animation-duration: 300ms;
}
javascript
// View Transitions API
document.startViewTransition(() => {
    updateDOM();
});

// 特定元素的CSS
.hero-image {
    view-transition-name: hero;
}
::view-transition-old(hero),
::view-transition-new(hero) {
    animation-duration: 300ms;
}

Timing Reference

时长参考

Transition TypeDurationExitEnter
Crossfade200-300msease-inease-out
Slide forward300-400msease-inease-out
Slide back250-350msease-inease-out
Modal open250-350ms—ease-out
Modal close200-300msease-in—
Shared element300-400msn/aease-in-out
Tab switch150-200msinstantease-out
过渡类型时长退出缓动进入缓动
交叉淡入淡出200-300msease-inease-out
前进滑动300-400msease-inease-out
返回滑动250-350msease-inease-out
模态框打开250-350ms—ease-out
模态框关闭200-300msease-in—
共享元素300-400msn/aease-in-out
标签切换150-200ms即时ease-out

Navigation Patterns

导航模式

PatternTransitionDirection
Drill-down (list→detail)Slide left / shared elementRight = forward
Tab barFade / slideHorizontal
Bottom sheetSlide upVertical
ModalScale + fadeZ-axis
Back buttonReverse of forwardLeft = back
模式过渡效果方向
深入浏览（列表→详情）向左滑动 / 共享元素向右=前进
标签栏淡入淡出 / 滑动水平方向
底部面板向上滑动垂直方向
模态框缩放+淡入淡出Z轴方向
返回按钮与前进过渡反向向左=返回

Performance

性能优化

  1. Use 
    transform
    and 
    opacity
    only
  2. Hardware acceleration: 
    will-change: transform
  3. Reduce motion: instant transitions
  4. Test on slow devices—transitions must not block
  5. View Transitions API: native performance
  1. 仅使用
    transform
    和
    opacity
    属性
  2. 硬件加速：
    will-change: transform
  3. 减少动画：提供即时过渡选项
  4. 在低速设备上测试——过渡不能阻塞操作
  5. View Transitions API：原生级性能