Transitions Between States · A turns into B
Shape overlay transition形状蒙版转场
- whole screen covered
- shaped
- turned over
Tap once and several coloured bands sweep up across the whole screen, covering the old content, then exit upward to reveal the new one. The page reads as turned over rather than swapped in place.
When to use it
Use it for page-to-page navigation, large section swaps, and opening full-screen detail. Do not use it for small in-place state changes — a transition costs a second and people will wait.
Parameters
4–6 bands · each 620ms cubic-bezier(.76,0,.24,1) · 60ms between bands · swap content when covered
Recipe
each 620ms cubic-bezier(.76,0,.24,1)Shape overlay transition → 4–6 bands · 60ms between bands · swap content when covered
One sentence for your AI
Build an overlay transition: stack 4–6 full-screen bands, each sweeping up with translateY(100% → 0), 620ms cubic-bezier(.76,0,.24,1) per band and 60ms between bands. At the moment they fully cover, swap the content underneath, then let the bands exit upward.