page-transitions

用途

该技能用于在网页和移动应用中实现路由切换、视图过渡、模态框打开/关闭以及导航动画时，把迪士尼的十二项动画原则应用到页面转场设计中。

主要能力

技能提供一张快速参考表，将十二项动画原则分别对应到页面转场的实现方式：

挤压与拉伸：进入页面可带轻微弹性收尾，模态面板完全打开时轻微回弹，下拉导航在触发前拉伸。
预备动作：当前页面在新页面进入前开始退出，轻微淡出或缩放为变化做准备，导航指示器在页面切换前更新。
舞台调度：共享/主视觉元素在视图间保持上下文，导航、页脚等公共元素保持稳定，新内容区域获得转场焦点。
直进与逐帧：共享元素转场连续变形（直进），交叉淡入淡出在离散状态间切换（逐帧），依据内容关系选择。
跟随与重叠：页面内容在初始位置后落定，内容错峰进入——先头部、再主体、后页脚，图片在容器之后轻微淡入。
缓入缓出：退出用 ease-in（加速离开），进入用 ease-out（减速进入），共享元素用 ease-in-out，绝不使用线性。
弧线：滑动转场可轻微弯曲，堆叠导航暗示 z 轴深度，圆形揭示从触发点扩展。
次要动作：转场期间头部更新标题，底部导航指示器移动，背景色变化，滚动位置随转场重置。
时间控制：快速转场 200-300ms，标准 300-400ms，复杂 400-500ms，模态/面板 250-350ms，返回导航通常比前进更快。
夸张：仅保留给关键节点——引导、成就，常规导航应平滑而非戏剧化。
扎实的绘画：保持一致的空间隐喻，页面堆叠则维持 z 序，页面滑动则方向一致。
吸引力：转场应感觉有帮助而非炫技，快速、平滑、有方向感，用户应理解自己从哪来、到哪去。

使用方式

技能给出三类转场模式的代码示例：

交叉淡入淡出（默认）：

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

滑动（层级式）：

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

共享元素（主视觉）：

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

技能还提供时间参考表，列出交叉淡入淡出、前进滑动、返回滑动、模态打开、模态关闭、共享元素、标签切换各自的时长与退出/进入缓动；以及导航模式表，说明下钻（列表→详情）、标签栏、底部面板、模态、返回按钮各自的转场方式与方向约定。

适用场景

适用于需要在网页或移动应用中实现路由变化、视图切换、模态框开关或导航动画的场景，尤其是希望转场符合动画原则、具有方向感与空间一致性的项目。

限制

性能方面，技能建议仅使用 transform 和 opacity，使用 will-change: transform 进行硬件加速，为减少动态效果偏好提供即时转场，在慢速设备上测试以确保转场不阻塞，并指出 View Transitions API 具备原生性能。关于该技能的安装方式、收费、价格、支持平台等事实，资料中暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制