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

速查参考

Principle	Page Transition Implementation
Squash & Stretch	Entering page elastic effect
Anticipation	Exit animation before enter
Staging	Hero elements bridge views
Straight Ahead / Pose to Pose	Shared element vs crossfade
Follow Through / Overlapping	Content settles after nav
Slow In / Slow Out	Asymmetric enter/exit easing
Arc	Slide transitions with curve
Secondary Action	Background, nav state changes
Timing	200-500ms total transition
Exaggeration	Reserved for emphasis moments
Solid Drawing	Consistent spatial model
Appeal	Smooth, 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 Type	Duration	Exit	Enter
Crossfade	200-300ms	ease-in	ease-out
Slide forward	300-400ms	ease-in	ease-out
Slide back	250-350ms	ease-in	ease-out
Modal open	250-350ms	—	ease-out
Modal close	200-300ms	ease-in	—
Shared element	300-400ms	n/a	ease-in-out
Tab switch	150-200ms	instant	ease-out

过渡类型	时长	退出缓动	进入缓动
交叉淡入淡出	200-300ms	ease-in	ease-out
前进滑动	300-400ms	ease-in	ease-out
返回滑动	250-350ms	ease-in	ease-out
模态框打开	250-350ms	—	ease-out
模态框关闭	200-300ms	ease-in	—
共享元素	300-400ms	n/a	ease-in-out
标签切换	150-200ms	即时	ease-out

Navigation Patterns

导航模式

Pattern	Transition	Direction
Drill-down (list→detail)	Slide left / shared element	Right = forward
Tab bar	Fade / slide	Horizontal
Bottom sheet	Slide up	Vertical
Modal	Scale + fade	Z-axis
Back button	Reverse of forward	Left = back

模式	过渡效果	方向
深入浏览（列表→详情）	向左滑动 / 共享元素	向右=前进
标签栏	淡入淡出 / 滑动	水平方向
底部面板	向上滑动	垂直方向
模态框	缩放+淡入淡出	Z轴方向
返回按钮	与前进过渡反向	向左=返回

Performance

性能优化

Use
```
transform
```
and
```
opacity
```
only
Hardware acceleration:
```
will-change: transform
```
Reduce motion: instant transitions
Test on slow devices—transitions must not block
View Transitions API: native performance

仅使用
```
transform
```
和
```
opacity
```
属性
硬件加速：
```
will-change: transform
```
减少动画：提供即时过渡选项
在低速设备上测试——过渡不能阻塞操作
View Transitions API：原生级性能