共享元素转场 · Shared Element Transition
英文：Shared Element Transition
动效与交互难度：入门 ★
🗣️一句话大白话
同一元素在两个视图间“飞过去”的转场：点击卡片，图片平滑放大变成详情页头图。App 转场的“高级感”天花板。共享元素转场：转场前后同一元素（如图片）位置和尺寸平滑过渡，用户感知“卡片变成了详情页”。告诉 AI“点击卡片，卡片图片平滑放大过渡到详情页头图，300ms”即可。要点：共享元素必须“同一视觉内容”（同图/同标题）；过渡 250-400ms，太长拖节奏。
🎬真实场景
卡片→详情页、列表→大图、商品→详情、相册→全屏
📮你可以这样说
「【图像模型版】点击 [卡片]，卡片内图片平滑放大过渡到详情页头图位置（300ms 先快后慢），其余内容淡入；返回时反向过渡。 【HTML/CSS/JS 版】用 View Transitions API（view-transition-name 标记共享元素），或手动 FLIP：记录图片首尾 rect，transform 过渡后清除。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：共享元素=整页动画；只有“同一元素”才做共享过渡
- ▸转场元素不是同一内容时会“穿帮”
🚫什么时候别用
- ✗两个视图无共同元素时（用页面转场）
🧩常见变体
卡片→详情列表→大图缩略→全屏
💡小贴士
- ✦250-400ms 最自然；优先 View Transitions API 省事
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系
🔗相关术语
📌素材来源
词条内容参考自 Adrian Punk（X @AdrianPunk115）· WayToAGI 转载 的「《Vibe Coding 网页动效词典（下篇）》」，已按项目「大白话 + 双通道提示词」体例改写与补充。查看原文 ↗