Page Transition Spec
Added 2026-10
Page Transition Spec — Chinese original prompt
从 [列表页] 点卡片进入 [详情页],卡片图片要延续过去。请写出转场描述:触发条件、哪一层先动、进入与退出的时长(毫秒)、缓动曲线、共享元素的起止位置与圆角变化、返回时是否反向播放。要求开发能照着实现,参数一行一个字段,最后注明手势中途取消时怎么处理。
Site original
Chinese original
Example
Sample input
从商品列表点卡片进详情页,卡片图片要延续过去,帮我写转场描述,参数一行一个字段。
The output should include
- 触发条件与先动的那层说清
- 进出时长与缓动曲线给数值
- 共享元素起止位置与圆角变化
Replace these placeholders 2
Swap the bracketed parts for your own details before sending.
[列表页][详情页]
How to use
共享元素转场一定要写取消态,不然用户滑一半松手就卡住。
Try tweaking it
- Swap style words for measurable parameters: light, lens, material, composition.
- Ask for three variants of one prompt, then compare the differences.
What you should get
- A parameter sheet you can act on (light, lens, material, framing)
- Two or three alternatives with trade-offs
Common mistakes
- Stacking words like "premium, cinematic, 8K" — no two results match.
- Asking for a real brand or celebrity look and getting something close but unusable.
How to check the output
- Parameters are executable — ready to use in a tool or hand to a designer.
- It explains the trade-offs, not just the final look.
Where it works
- Good for: breaking vague "premium feel" into concrete light, material, lens and composition parameters.
- Watch out: for real brands, celebrities or third-party work, use equivalent descriptions to avoid infringement.