Shared Axis (共享轴)
别称 Shared axis X/Y/Z
旧内容和新内容沿 X、Y 或 Z 轴一起移动并伴随淡入淡出，以表现空间关系。
适用场景
分步流程、同级导航、逐层深入
变体
- X axis
- Y axis
- Z axis
提示词
将 [应用位置] 替换为你要应用的位置，然后粘贴给 AI 智能体。提示词中包含动效名称，下次只说名称即可提出需求。
在[应用位置]添加“共享轴”(Shared Axis)页面过渡，也叫 shared axis X/Y/Z。
前进时，旧内容向一侧滑动一小段并快速淡出，新内容从另一侧滑入并紧随其后淡入；后退时方向相反。
位移要短，只需暗示方向；轴向要与导航对应：同级用横向，分步用纵向，逐层深入用纵深方向。相似的动效
A
B
点击试试
Slide Page Transition (页面滑动过渡)
别称 Push / pop, Directional slide, Slide-over route
新页面从一侧滑入，旧页面同时滑出，方向跟随导航层级。
适用场景
移动端风格的前进/返回导航
在[应用位置]添加“页面滑动过渡”(Slide Page Transition)，也叫 push / pop 或 directional slide。
前进时，新页面从侧边推入，旧页面从另一侧滑出；后退时两者反向移动：平滑，起止都要缓和。
方向要与导航层级对应，包括浏览器的返回按钮；滑动过程中页面不能出现横向滚动。A
B
点击试试
Zoom Page Transition (页面缩放过渡)
别称 Scale transition, Zoom in / out
旧页面放大或缩小并淡出，新页面同时缩放到位。
适用场景
在层级中深入或返回
在[应用位置]添加“页面缩放过渡”(Zoom Page Transition)，也叫 scale transition 或 zoom in / out。
深入时，旧页面微微放大并淡出，新页面从稍小的尺寸放大到位；返回时反向缩小：平滑、迅速。
缩放幅度要含蓄，保证内容全程可读；如果用户开启了“减少动态效果”(prefers-reduced-motion)，改用简单的淡入淡出。A
B
点击试试
Crossfade Page Transition (页面交叉淡化)
别称 Cross-dissolve, Fade transition, Root cross-fade, Cross-Document View Transition, MPA view transition, @view-transition navigation auto
旧页面淡出的同时，新页面在同一区域淡入。
适用场景
默认的路由切换
在[应用位置]添加“页面交叉淡化”(Crossfade Page Transition)，也叫 cross-dissolve 或 fade transition。
导航时，旧页面淡出，新页面同时在同一区域淡入：柔和，而且相当快。
让两个页面保持在同一位置，淡化过程中不能有任何位移；切换后把焦点移到新页面的主标题上。A
B
点击试试
Fade Through (淡出淡入)
别称 Fade-through transition, Out-In Route Transition, Wait mode, mode="wait", mode="out-in"
旧内容先完全淡出，新内容再带着轻微缩放淡入。
适用场景
在互不相关的页面之间切换
在[应用位置]添加“淡出淡入”(Fade Through)页面过渡，也叫 fade-through transition 或 out-in route transition。
旧内容先快速、完全地淡出，然后新内容一边微微放大到位一边淡入。
两者绝不能重叠，新内容放大时布局也不能发生位移。Page Transition 中的其他动效
BC
A
点击试试
Shared Element Transition (共享元素过渡)
别称 Hero transition, View Transition shared element, view-transition-name morph
对应的元素（例如缩略图）在页面之间变换位置和大小。
适用场景
从缩略图进入详情页
在[应用位置]添加“共享元素过渡”(Shared Element Transition)，也叫 hero transition 或 view-transition-name morph。
进入下一页时，对应的元素（例如缩略图）平滑地移动并放大到新页面上的位置，其余内容交叉淡化；返回时再缩回去。
给两个页面上对应的元素同一个共享标识，确保正确配对；浏览器无法变换时，退回为简单的交叉淡化。