mcpField
P
page-transitions

page-transitions

github.com/dylantarre设计与 UI132673 次安装43 周前更新
代码仓库

关于 page-transitions

page-transitions 是用于路由变化、视图切换和导航动效的设计指南，面向构建网页或应用导航体验的设计师与开发者。它整理 12 条动画原则、过渡模式、时长参考和性能建议。

主要功能

  1. 01将 12 条动画原则用于页面过渡
  2. 02介绍淡入淡出、滑动与共享元素
  3. 03提供导航模式和时长参考
  4. 04涵盖性能与减少动态效果建议

适用场景

  1. 01为列表到详情页设计层级切换
  2. 02规划前进与返回的页面滑动
  3. 03为标签切换或模态框选择过渡

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/page-transitions确认已加载。

详细介绍

页面转场动画

将迪士尼 12 条动画原则应用于路由切换、视图转场和导航模式。

快速参考

原则页面转场实现
挤压与拉伸页面进入时的弹性效果
预备动作新页面进入前先播放退出动画
演出布局通过主视觉元素衔接视图
逐帧动画 / 关键姿势动画共享元素与交叉淡化
跟随动作 / 重叠动作导航后内容逐渐稳定
慢入 / 慢出进入与退出使用不对称缓动
弧线使用带弧度的滑动转场
次要动作背景、导航状态变化
时间转场总时长为 200-500ms
夸张仅用于强调时刻
扎实绘制保持空间模型一致
吸引力导航流畅且方向明确

原则应用

挤压与拉伸：新页面进入时可以带有轻微的弹性稳定效果。模态面板完全展开时可以稍微回弹。触发导航前，拉动操作可以先产生拉伸效果。

预备动作：当前页面先开始退出，新页面随后进入。轻微淡出或缩放可以为变化做好铺垫。页面切换前先更新导航指示器。

演出布局：共享元素 / 主视觉元素在视图间保持上下文连贯。常见元素（导航栏、页脚）保持稳定。让转场焦点落在新的内容区域。

逐帧动画与关键姿势动画：共享元素转场会连续变形（逐帧动画）。交叉淡化会在离散状态间切换（关键姿势动画）。根据内容之间的关联选择合适方式。

跟随动作与重叠动作：页面内容在到达初始位置后逐渐稳定。内容分阶段进入——先标题栏，再主体，最后页脚。图片加载后，在容器中轻微淡入。

慢入 / 慢出：退出：使用缓入（加速离开）。进入：使用缓出（减速进入）。组合使用时，共享元素采用缓入缓出。切勿使用线性效果——会让人觉得不自然。

弧线：滑动转场可以带有轻微弧度。堆栈导航意味着存在 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;
}

时间参考

转场类型时长退出进入
交叉淡化200-300ms缓入缓出
向前滑动300-400ms缓入缓出
返回滑动250-350ms缓入缓出
打开模态框250-350ms—缓出
关闭模态框200-300ms缓入—
共享元素300-400ms不适用缓入缓出
切换标签页150-200ms即时缓出

导航模式

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

性能

  1. 仅使用 transform 和 opacity
  2. 硬件加速：will-change: transform
  3. 减弱动态效果：即时转场
  4. 在低性能设备上测试——转场不得造成阻塞
  5. View Transitions API：原生性能

评论

支持 Markdown