状态之间的转换 · A 变成 B
卡片撑满全屏Card unfurl to fullscreen
- 像拉开取景框
- 图不会糊
- 圆角跟着变
点一张圆角卡片，它连着圆角一起长大铺满整屏；里面的图同时反向缩小，所以看起来像取景框被拉开，而不是照片被放大 —— 中间不会糊。
什么时候用它
列表到详情、图库放大、卡片式导航用它；如果目标是另一个页面、而且两页没有共同元素，用共享元素转场更合适。
参数
outer transform: scale .52 → 1 · inner image 1.3 → 1 (counter-scale) · border-radius calc(20px / scale) · 520ms cubic-bezier(.32,.72,0,1)
配方
卡片撑满全屏 → scale .52 → 1 @ 520ms cubic-bezier(.32,.72,0,1)卡片撑满全屏 → image 1.3 → 1 counter-scale @ 520ms
给 AI 的一句话
让这张卡片原地展开成全屏：外框 scale 从 .52 到 1，内层图片反向从 1.3 到 1（两个缩放相乘约等于 1，图片实际像素几乎不变，所以不会糊），圆角写成 calc(20px / 当前scale) 做除法补偿，整段 520ms cubic-bezier(.32,.72,0,1)。