共享元素无缝放大

实现一个共享元素无缝放大过渡（原生 HTML/CSS/JS，零依赖，单文件交付）：

【效果描述】用户点击列表中的缩略图（如商品图、头像、卡片封面），该图仿佛"原位生长"般从缩略图位置平滑放大到全屏预览层，背景同时淡入半透明遮罩；点击遮罩或按 Esc 时，大图沿原路径缩小回缩略图位置后消失。整个过程无跳动、无闪白，用户感知是"同一张图在两个状态间连续变形"。

【交互参数】
- 触发：点击缩略图放大；点击遮罩 / 按 Esc / 点击关闭按钮缩小还原
- 过渡时长：300ms（可调区间 250–350ms）
- 缓动曲线：cubic-bezier(0.4, 0, 0.2, 1)（Material 标准曲线）；放大可用 ease-out 替代
- 遮罩：rgba(0, 0, 0, 0.85)，透明度随过渡同步 0→1 / 1→0
- 防闪关键：大图与缩略图宽高比不一致时必须用 object-fit: cover，且放大层与缩略图使用同一图片源（或同比例裁剪），避免切换瞬间闪变
- 边界情况：过渡进行中再次点击缩略图应忽略或立即完成当前过渡；缩略图在过渡期间被滚动出视口时，以其过渡开始时的 rect 为准（可先锁定滚动）；图片未加载完成时用缩略图占位，loaded 后再替换

【使用示例】
- 商品图放大：`<img class="uw-flip-thumb" src="product-small.jpg" data-full="product-large.jpg" data-ratio="4/3">` 绑定后点击即全屏预览；data-full 可按项目替换为高清图地址
- 卡片进详情：给卡片封面加 `data-flip-id="cover-123"`，详情页头部图加相同 id，调用 `uwFlip.to(detailEl, { from: cardCover })` 复用同一过渡逻辑进入详情页

【实现要点】
1. 点击缩略图时，用 getBoundingClientRect() 记录其位置与尺寸（fromRect）
2. 创建 fixed 定位的放大层容器（uw-flip-overlay + uw-flip-image），插入 body，加载大图
3. 钉帧：给放大层图片设置 `transition: none`，用 transform: translate + scale（或 top/left/width/height）将其精确覆盖到 fromRect 位置，强制浏览器完成一次布局
4. 下一帧（requestAnimationFrame，内层再嵌一层 rAF 更稳）移除 transition: none，添加 `transition: transform 300ms cubic-bezier(0.4,0,0.2,1)`，并将目标值设为全屏居中、等比放大的 rect（计算方式：以屏幕宽高的 90% 为上限，按图片宽高比缩放）
5. 遮罩 opacity 用相同时长缓动从 0→1；transitionend（监听 transform）后给 overlay 加 uw-is-open 标记
6. 关闭时反向执行：transform 回到 fromRect 对应值，遮罩 1→0，transitionend 后移除 DOM 节点
7. transform 方案优先于 top/left/width/height（只触发合成，不触发布局），计算 scale 时以 fromRect 为基准逆推 transform-origin: top left
8. 过渡中加 uw-is-animating 锁防止重复触发；Esc 监听挂在 document 上，关闭后移除

【质量要求】不污染全局样式、类名加 uw- 前缀（样式全部scoped在 .uw-flip-* 下，不修改 body/html 既有样式）；prefers-reduced-motion 时禁用动画（直接切换显隐，仅保留遮罩淡入可一并去掉）；注释标出可调参数（过渡时长、缓动曲线、遮罩颜色与透明度、全屏缩放上限 90%、图片宽高比处理策略）。

【参考资源】
- 资料详情：https://ui.undoai.cn/components/shared-element-flip/
- 效果快照：https://ui.undoai.cn/components/shared-element-flip/cover.png
- Demo 源码：https://ui.undoai.cn/components/shared-element-flip/demo.html

展开后加载源代码