页面过渡动画指南：迪士尼12条动画原则在Web路由与导航中的应用

page-transitions by dylantarre/animation-principles

78 周安装量

20 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions

前端优化动画用户体验

🇨🇳中文介绍

页面过渡动画

将迪士尼的 12 条动画原则应用于路由变更、视图过渡和导航模式。

快速参考

原则	页面过渡实现
挤压与拉伸	进入页面的弹性效果
预备动作	进入前先执行退出动画
演出布局	英雄元素连接视图
连续动作与姿态对应	共享元素过渡与交叉淡出
跟随与重叠动作	导航后内容稳定下来
慢入慢出	非对称的进入/退出缓动效果
弧形运动	带曲线的滑动过渡
次要动作	背景、导航状态变化
时间节奏	总过渡时间 200-500 毫秒
夸张手法	留待强调时刻使用
扎实的描绘	一致的空间模型
吸引力	流畅、有导向的导航

原则应用

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

交叉淡出（默认）

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

滑动（层级式）

/* 前进导航 */
.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%);
}

共享元素（英雄）

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

过渡类型	持续时间	退出	进入
交叉淡出	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	instant	ease-out

模式	过渡	方向
向下钻取（列表→详情）	向左滑动 / 共享元素	右 = 前进
标签栏	淡入淡出 / 滑动	水平
底部表单	向上滑动	垂直
模态	缩放 + 淡入淡出	Z 轴
返回按钮	前进的反向	左 = 返回

仅使用 transform 和 opacity
硬件加速：will-change: transform
减少运动：即时过渡
在慢速设备上测试——过渡不得阻塞
View Transitions API：原生性能

2026 年 1 月 24 日

🇺🇸English

Page Transition Animation

Apply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.

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

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.

Transition Patterns

Crossfade (Default)

.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)

/* 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%);
}

Shared Element (Hero)

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

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

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

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

Weekly Installs

Repository

dylantarre/anim…inciples

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

codex68

opencode66

gemini-cli65

cursor62

github-copilot59

claude-code55

agentation - AI智能体可视化UI反馈工具，连接人眼与代码的桥梁

5,400 周安装