MICRO-INTERACTION

页面转场Page Transition

新旧页面沿水平方向一推一让，右侧新页从右滑入、旧页向左退场。移动端 App 的默认空间语言（前进 = 推入，后退 = 拉出）。

效果预览

列表页

详情页

适合用在哪

多步流程（结算、向导）、移动端页面栈、SPA 路由切换。

容易踩的坑

前进与返回用同一个方向滑动，用户失去页面层级的空间感。
转场超过 500ms 且期间无法点击，快速操作的用户会觉得卡。
未响应 prefers-reduced-motion，大面积横移易引发眩晕。

设计提示词 · Prompt

页面转场（Page Transition）：旧页 animation 从 translateX(0) opacity:1 到（52% 起）translateX(-24%) opacity:0；新页从 translateX(100%) 到（54% 后）translateX(0)，两者时长一致（约 0.4-0.5s）用 cubic-bezier(.4,0,.2,1)，确保完整覆盖而不是同时半透明。方向语义要一致：前进是「新页从右推入」，返回是「新页从左拉入」，让用户形成空间预期。现代做法直接用 View Transitions API：给两个根元素分别设 view-transition-name，浏览器自动补间。

Page Transition: the old page animates from translateX(0) opacity:1 to (from 52%) translateX(-24%) opacity:0; the new page goes from translateX(100%) to (after 54%) translateX(0). Both share the same duration (about 0.4-0.5s) with cubic-bezier(.4,0,.2,1), ensuring a full cover rather than both being semi-transparent at once. Keep directional semantics consistent: going forward means "the new page pushes in from the right", going back means "the new page pulls in from the left", so users build spatial expectations. The modern approach uses the View Transitions API directly: set view-transition-name on the two root elements and the browser tweens automatically.

常见搭配

同一页面里经常和「页面转场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

视图转场View Transitions API 分步表单Multi-step Wizard 底部标签栏Bottom Tab Bar

演示 HTML 结构

<div class="s d-center">
  <div class="mi-page">
    <div class="mi-page__a">
      <b>列表页</b>
      <div class="mi-page__l"></div><div class="mi-page__l"></div><div class="mi-page__l mi-page__l--s"></div>
    </div>
    <div class="mi-page__b">
      <b>详情页</b>
      <div class="mi-page__l"></div><div class="mi-page__l mi-page__l--s"></div><div class="mi-page__l"></div>
    </div>
  </div>
</div>