# 共享元素无缝放大 — design.md

内容版本：sha256:bdc47dc224488bf718c2ff1a233a31bdb0ff3dc5ae33b0bd9a7fc20fba022591

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：components/shared-element-flip；语义类型：interaction。
- 分类：页面切换。
- 标签：FLIP、共享元素、过渡钉帧、缩略图放大。
- 场景：图片预览、商品图放大、头像查看、卡片进详情。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 先钉一帧再过渡：先把大图用 transition: none 定位/缩放到小图位置，下一帧（requestAnimationFrame）再放开过渡，否则动画不会发生
- 无缝放大参数：从小图 rect 放大到全屏，时长 250-350ms，缓动 ease-out 或标准曲线 cubic-bezier(0.4,0,0.2,1)
- 尺寸匹配防闪：大图与小图宽高比需一致或用 object-fit: cover 处理，尺寸不匹配会闪烁

### 实际文件与参考资源

- `cover.png`（sha256:b5abb3774ba51cf13771c35dd313ef2c5c163d3449e275fff1d375c73792fc64）
- `demo.html`（sha256:521444f8d9c5687058717b65e94d9883fe5eae88dcb32d2e62efb4c374d8d882）
- `meta.yml`
- 实现摘要：sha256:521444f8d9c5687058717b65e94d9883fe5eae88dcb32d2e62efb4c374d8d882。

## 未提供

- 未结构化记录的精确色值、字号、间距、断点、动效时长与状态转换参数不作推断；亮点中的数值属于元数据声明，demo 的存在与摘要不代表浏览器行为已验收。

## 实现建议

- 按正常、悬停、聚焦、激活、禁用、加载、成功和错误状态定义适用的状态表。
- 使用语义化元素，验证键盘操作、焦点可见性、触控目标和减少动效偏好。
- 以 demo.html 为实现参考，逐项验证交互、窄屏布局、文本溢出和错误恢复；具体参数由实现与验收确认。