Transitions Between States · A turns into B
Layout animation布局动画
- natural
- automatic
- jump-free
When items are added, removed or reordered, the rest shift smoothly out of the way or close the gap instead of snapping.
When to use it
Use it when inserting, deleting or sorting items shifts positions; if content merely fades in and out, use “Fade in”.
Parameters
260ms · cubic-bezier(0.22, 1, 0.36, 1) · position / size animates automatically
Recipe
Layout animation → 260ms cubic-bezier(0.22, 1, 0.36, 1)Layout animation → position / size animates automatically
One sentence for your AI
Add layout animation to this list: when an item is inserted or removed, the others slide to their new positions over 260ms with cubic-bezier(0.22, 1, 0.36, 1) instead of jumping.