共享元素转场
Shared Element Transition
别名:共享元素转场元素飞入详情卡片放大成页面无缝转场hero 动画
这是什么
列表里的缩略图或卡片在打开详情时"飞"成详情页主图—— 同一个元素跨两个视图连续运动， 而不是各自出现。 元素身份在转场中保持连续， 是最强的上下文延续。
交互实验室
试一试，再决定怎么用正在加载演示…
✓ 适用场景
- 列表 → 详情（图片、卡片、商品）
- 需要强调"还是那件东西"的选中场景
- 媒体浏览、相册、文件预览
✕ 不适用场景
- 两视图布局差异过大（飞行轨迹扭曲难看）
- 低端设备上的大图跨页动画（掉帧破坏错觉）
- 转场时间超过 400ms（用户开始等）
常见形式
容器变换
Container transform
卡片整体放大为详情容器，Material 3 标准
主图飞行
Hero image
只有图片飞行，其余内容淡入
退化淡切
Fallback
不支持时退化为淡入淡出
实现要点
FLIP techniqueview-transition-namegetBoundingClientRecttransform-onlyFLIP 技术——先记录元素起始 getBoundingClientRect，视图切换后再测终点， 反向 transform 摆回起点， 再过渡到 0。 Web 现代法可用 View Transitions API（document.startViewTransition + view-transition-name）。 时长 250～400ms； 尊重 prefers-reduced-motion 退化为直接切换。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
为项目列表到详情添加共享元素转场。 先检查路由/视图切换方式与现有转场实现，选择 FLIP 或 View Transitions。 要求： - 元素连续运动，250～400ms，只动 transform/opacity - 关闭时原路返回；不支持时退化为淡切 - 不破坏滚动位置与焦点管理 - 尊重 prefers-reduced-motion - 不引入新依赖 完成后运行现有检查，说明修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
页面之间切换时，旧页面滑出或淡出、新页面滑入或淡入，让路由跳转 从"硬切"变成一段 200～400ms 的连续运动。方向应与信息层级一致： 进入下级页面向左推入，返回时向右退出，帮助用户建立空间心智模型。
动效相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件应用于用圆角边框或底色围出一块自包含内容的矩形容器，一块卡片聚合一组相关信息： 封面图、标题、摘要与操作。是内容流、仪表盘与电商列表的通用显示单元。
组件应用于左侧一列摘要条目，右侧展示选中项的完整详情，点击左侧条目右侧即时联动更新。 它解决的是"在列表页与详情页之间来回跳转"的问题——总览与细读同屏共存， 用户切换条目不丢方向感，浏览和比对多个条目的成本大幅降低。
交互模式搭配使用