Transitions Between States · A turns into B
Shared element transition共享元素转场
- coherent
- spatial
- cinematic
A thumbnail flies to a new position and enlarges as the detail view opens, making the two screens feel like one space.
When to use it
Use it for list-to-detail navigation and image previews; when the two screens share no visual element, it only adds confusion.
Parameters
320ms · cubic-bezier(0.32, 0.72, 0, 1) · position and size transition together
Recipe
Shared element transition → 320ms cubic-bezier(0.32, 0.72, 0, 1)Shared element transition → position and size transition together
One sentence for your AI
Build a shared element transition from the list thumbnail to the detail image: the same image moves and scales from its list position to the detail position over 320ms, cubic-bezier(0.32, 0.72, 0, 1).