状态之间的转换 · A 变成 B
形状蒙版转场Shape overlay transition
- 整屏被盖住
- 有形状
- 翻了个面
点一下，几条色块从下往上扫满整屏，把旧内容盖住，再从上方退出 —— 露出的是新内容。整页像被翻了面，而不是原地换了内容。
什么时候用它
页面之间跳转、大区块切换、打开全屏详情用它；同屏内的小状态变化别用 —— 一次转场要花掉一秒，用户会等。
参数
4–6 bands · each 620ms cubic-bezier(.76,0,.24,1) · 60ms between bands · swap content when covered
配方
每一项 620ms cubic-bezier(.76,0,.24,1)形状蒙版转场 → 4–6 bands · 60ms between bands · swap content when covered
给 AI 的一句话
做一次蒙版转场：叠 4 到 6 条全屏色块，各自从下往上 translateY(100% → 0) 扫满屏幕，每层 620ms cubic-bezier(.76,0,.24,1)、层间错峰 60ms；盖满的那一刻把底层内容换成新内容，再让色块从上方退出。