Developer handoff · Motion spec

信息流卡片展开 / 关闭动画

左侧是最终交互基准。四张卡片均可点击；关闭按钮只负责回到对应来源卡片。本页记录当前确认后的尺寸、曲线、时序和无缝图层交接规则。

FRAME 375×812 CSS TRANSITION 4 CARDS REDUCED MOTION

01 · 两个关键状态

列表态 / Card A

卡片: 343 × 157
位置: x 16 / y 动态
圆角: 11px
封面: 80 × 80
封面位置: x 250 / y 13
封面圆角: 4px
封面投影: none

展开态 / Card B

卡片: 375 × 751
位置: x 0 / y 0
圆角: 0 0 20 20
封面: 257 × 257
封面位置: x 59 / y 147
封面圆角: 12px
封面投影: 0 4 30 / 40%

卡片的 top 必须取被点击卡片的真实位置：16 / 185 / 354 / 523px。禁止固定从第一张位置开始展开。

展开态静态锚点

元素	位置	尺寸 / 样式
关闭按钮	x 20 / y 43	36 × 36 / capsule
倍速按钮	x 244 / y 43	36 × 36 / capsule
静音按钮	x 292 / y 43	63 × 36 / capsule
来源卡片	x 12 / y 683	351 × 56 / radius 10
来源缩略图	卡片内 x 8 / y 10	36 × 36 / radius 3
底部装饰	x 0 / y 757	375 × 699 / radius 20 20 0 0white / opacity .15

02 · 正播时间轴

横轴范围 0–600ms。所有动画同时从 0ms 开始，只有底部装饰卡延迟 133ms。

0150300450600ms

卡片轮廓

400ms

封面位移

333ms

封面尺寸/圆角/阴影

417ms

导航栏

350ms

来源卡片

250ms

底部装饰卡

133 + 450ms

正播参数

对象	属性	参数
主卡片	top / left / width / height / radius / background / shadow	400mscubic-bezier(.52,.25,0,1)
封面	top / left	333mscubic-bezier(.46,.15,0,1)
封面	width / height / radius / shadow	417mscubic-bezier(.38,1.21,.22,1)
列表层	opacity 1 → 0	417mscubic-bezier(.46,.28,0,1)
导航栏	opacity 0 → 1 translateY 10 → 0	350mscubic-bezier(.46,.16,0,1)
来源卡片	整体 opacity 0 → 1 整体 translateY 10 → 0	250mscubic-bezier(.46,.16,0,1)
底部装饰	opacity 0 → .15 translateY 72 → 0	delay 133ms / 450mscubic-bezier(.46,.16,0,1)

03 · 反播时间轴

关闭时不直接切回列表卡片。变形卡片在最上层完成 333ms 收合，终点重合后才做图层交接。

083167250333ms

卡片轮廓

333ms

封面全部属性

333ms

导航栏

250ms

来源卡片

250ms

底部装饰卡

250ms

反播参数

对象	属性	参数
主卡片	top / left / width / height / radius / background / shadow	333mscubic-bezier(.46,.16,0,1)
封面	top / left / width / height / radius / shadow	333mscubic-bezier(.46,-.18,0,1)
导航栏	opacity 1 → 0 translateY 0 → 10	250mscubic-bezier(.46,.16,0,1)
来源卡片	整体 opacity 1 → 0 整体 translateY 0 → 10	250mscubic-bezier(.46,.16,0,1)
列表恢复	opacity 0 → 1，位于变形卡片下方	333mscubic-bezier(.46,.16,0,1)

04 · 无缝图层交接

点击卡片时，先读取其 offsetTop，把共享的变形卡片同步到完全相同的起始几何和内容。
强制提交起始帧后再进入 is-open，避免第 2–4 张从第一张位置跳变。
完全展开后，以最长的封面动画 417ms 为终点，将原来源卡片设为 visibility:hidden。
点击关闭时，来源卡片继续隐藏；共享变形卡片保持最高层级并执行 333ms 反播。
333ms 结束时，共享卡片与来源卡片完全重合。此时移除关闭状态并恢复来源卡片，视觉上只有一张卡。

不要用两套视觉卡片交叉淡化。卡片轮廓和封面必须由同一个 DOM / View 连续改变几何属性；否则圆角、阴影和封面缩放会在中途出现换层感。

05 · 图层与内容规则

层级	内容与行为
z1–2	白色信息流与四张列表卡片。关闭期间在变形卡片下方恢复。
z3	共享变形卡片。正播和反播全程不换实例。
z4	展开导航栏：关闭、1.0x、静音，作为一个整体进退场。
内容组	当前只包含底部来源卡片。此前的标题、评论、列表按钮已删除，不要实现。
底部装饰	`375×699` 白色层，top 757px，圆角 20px，最终 opacity .15；无标题、图片或业务内容。

06 · 建议状态机

closed
  tap(card)
  → sync cardTop / color / cover / source
  → force layout
  → opening

opening
  → run open transitions
  → at 417ms hide source card
  → opened

opened
  tap(close)
  → keep source card hidden
  → closing

closing
  → morph shared card to original geometry
  → at 333ms restore source card
  → closed

如果用户在正播 417ms 内提前关闭，先取消正播定时器并立即隐藏来源卡片，再进入 closing，避免来源卡片与共享卡片同时出现。

07 · CSS 参数参考

--motion-card-open:
  400ms cubic-bezier(.52,.25,0,1);
--motion-card-close:
  333ms cubic-bezier(.46,.16,0,1);

--motion-cover-position-open:
  333ms cubic-bezier(.46,.15,0,1);
--motion-cover-size-open:
  417ms cubic-bezier(.38,1.21,.22,1);
--motion-cover-close:
  333ms cubic-bezier(.46,-.18,0,1);

--motion-nav-open:
  350ms cubic-bezier(.46,.16,0,1);
--motion-content:
  250ms cubic-bezier(.46,.16,0,1);
--motion-next:
  450ms cubic-bezier(.46,.16,0,1);

08 · 验收清单

四张卡片均从各自原始 y 坐标开始展开，并回到同一位置。
展开和关闭过程中，主卡片轮廓始终是同一个视觉实例。
列表来源卡片不会与变形卡片重复堆叠。
封面连续执行 80→257、r4→r12、无阴影→40% 阴影，过程中不换层。
底部来源卡片作为一个整体入退场，不拆分内部文字和图片。
展开页不出现已删除的标题、评论按钮和列表按钮。
底部装饰卡只有白色半透明形状，不带业务内容。
prefers-reduced-motion: reduce 下所有 transition 近似立即完成。