Transitions Between StatesA turns into B
How content turns from state A into state B within the same view.
12 motions
- Crossfade交叉淡化 The old content fades out while the new content fades in, overlapping briefly so no blank …
- Morph形变 The same object changes shape, size or corner radius and continuously becomes another form…
- Shared element transition共享元素转场 A thumbnail flies to a new position and enlarges as the detail view opens, making the two …
- Layout animation布局动画 When items are added, removed or reordered, the rest shift smoothly out of the way or clos…
- Accordion手风琴折叠 As a section expands or collapses, its height changes smoothly and the content below is pu…
- Direction-aware transition有方向感的转场 Going forward the new view enters from the right; going back it enters from the left, matc…
- Pixel dissolve像素溶解 The next image does not fade in; it grows in cell by cell
- Shape overlay transition形状蒙版转场 Tap once and several coloured bands sweep up across the whole screen, covering the old con…
- Card unfurl to fullscreen卡片撑满全屏 Tap a rounded card and it grows, corners and all, until it fills the screen — while the im…
- Scroll-anchored page flip整页掀起转场 Going to the next page, the current one is lifted and turned away from below your line of …
- Circle-origin reveal原点圆形扩散 Tap the icon and the whole layer does not fade in or slide from an edge — it draws a circl…
- Shader image transition着色器图像过渡 The switch between two images is not a crossfade: the picture is pushed apart from somewhe…