MODERN CSS
视图转场View Transitions API
浏览器自动为新旧两个状态截图并做补间，几行代码换来原生级的页面/状态切换动画。SPA 与多页应用都能用。
效果预览
列表页
详情页
适合用在哪
SPA 路由切换、列表项展开为详情、主题切换、任何「A 状态变成 B 状态」且希望平滑的场合。
容易踩的坑
- 多个元素共用同一个转场 name，浏览器会直接中止整个转场。
- 转场期间页面不可交互，时长超过 400ms 时用户会感觉点击被吞掉。
- 减弱动效偏好下不关闭转场动画，大面积缩放容易引发晕动不适。
设计提示词 · Prompt
视图转场（View Transitions API）：核心是 document.startViewTransition(() => { 更新 DOM 的代码 })，浏览器会截取旧状态、执行回调、截取新状态，然后自动做交叉淡入。给要独立动画的元素加 view-transition-name（如 view-transition-name: card-42），它就会在转场时保持身份并被单独补间，实现「元素从列表位置放大到详情页」的共享元素效果。用 ::view-transition-old(name) / ::view-transition-new(name) 自定义动画。跨页面（MPA）用 @view-transition { navigation: auto }。无支持的浏览器会直接执行回调、跳过动画，天然降级。注意 name 必须全局唯一。
View Transitions API: the core is document.startViewTransition(() => { code that updates the DOM }); the browser captures the old state, runs the callback, captures the new state, then automatically cross-fades. Give elements that should animate independently a view-transition-name (e.g. view-transition-name: card-42), and they keep their identity during the transition and are tweened separately, enabling the shared-element effect of "an element growing from its list position into the detail page". Customize animations with ::view-transition-old(name) / ::view-transition-new(name). For cross-document (MPA) transitions, use @view-transition { navigation: auto }. Unsupported browsers simply run the callback and skip the animation, degrading gracefully. Note that names must be globally unique.
常见搭配
同一页面里经常和「视图转场」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-vt">
<div class="mc-vt__a">列表页</div>
<div class="mc-vt__b">详情页</div>
</div>
</div>