共享元素过渡
Shared Element Transition
中级网页App共享元素过渡（Shared Element Transition）是在两个页面或状态之间，让同一样东西连续地从一处移动、缩放到另一处。比如在相册里点一张缩略图，它直接放大成详情页的大图；关闭时再缩回原来的格子。用户的视线一直跟着它，不用重新辨认。
你可能会说：「点开图片时能不能让小图直接放大成大图，关掉时再缩回去，而不是整页切过去？」
读之前建议先了解
动手看看小图放大成大图再缩回去
要点共享元素过渡是怎样起作用的？
- 1
两处的同一样东西用同一个名字
列表里的缩略图和详情页的大图在代码里其实是两个元素。我们给它们起同一个标识（framer-motion 里叫 layoutId，浏览器的 View Transitions 里叫 view-transition-name），动画库就知道「这是同一样东西」，会量出它在旧位置和新位置的大小，再用 transform 补出中间的移动和缩放过程。标识必须一一对应：两张不同的图用了同一个名字，就会从错的位置飞过来。
- 2
关闭时要原路缩回去
共享元素过渡最有价值的是「回来」那一段：大图缩回它在网格里的那一格，用户的视线跟着落回原处，接着往后看就行。如果关闭时直接切回列表，用户还得在一屏相似的缩略图里重新找刚才看到哪了。所以列表要保留原来的滚动位置，那一格也要还在原处。
- 3
其余内容配合淡入
共享的通常只有一两个元素（图片、标题），详情页的其余内容（描述、按钮）在主元素就位前后淡入就好，不要每样东西都飞来飞去。时长比普通转场稍长一点也可以，300~500 毫秒，因为移动的距离更大。
容易混淆的地方
页面转场是整页一起移动或淡入，共享元素过渡则只让「两页都有的那样东西」连续移动，其余内容各自出现。它也不是简单的放大动画：放大只是一个元素自己变大，共享元素过渡要把两个不同位置、不同大小的元素连成一段运动。
什么时候用
适合用
- 相册或作品集里点缩略图打开大图，关闭时缩回原来的格子。
- 电商列表里点商品卡片进入详情，商品图从卡片里放大到详情页顶部。
- 音乐 App 底部的迷你播放条展开成全屏播放页，封面从小变大。
不适合用
- 两个页面之间没有共同的元素（比如从设置页进入帮助页）时，别硬找东西来「共享」；用普通的页面转场。
- 列表有成百上千项、详情页要重新加载时，别为了共享动画让整页等图片；先保证打开速度。
- 后台表格点「编辑」打开表单时，不需要让某一格飞成表单；直接打开抽屉或弹窗更清楚。
练一练选一个答案，看看解释
你在做一个旅行相册，用户点缩略图看大图，看完关闭后经常找不到刚才看到哪了。哪种改法最合适？
让 AI 帮你做复制给 AI Agent 直接用
请给【列表与详情之间的同一元素，如：商品卡片的主图 → 商品详情页的头图】加上共享元素过渡。先阅读两处的组件和路由，确认项目里用的动画方案（如 framer-motion 的 layoutId 或浏览器 View Transitions）。要求：两处用同一个唯一标识（按商品 id 生成，不能重复），打开时图片从卡片位置放大到详情位置，关闭或返回时缩回原来那一格；返回列表要保留滚动位置。其余内容淡入，不要都做成飞行动画，时长 300~500 毫秒。浏览器不支持或开启减少动效时直接切换。不改无关代码。最后说明怎样验证：从列表第 10 项打开再返回，图片能缩回正确的位置。