状态之间的转换 · A 变成 B
整页掀起转场Scroll-anchored page flip
- 像翻一张纸
- 绕着你翻
- 有纵深
点进下一页时，当前这页像一张纸从你视线的下方被掀起、往外翻走，翻的时候还带一点旋转；新页面从屏幕底下整屏升上来。你站在页面的不同位置点，翻转的支点是不一样的。
什么时候用它
作品集、杂志、任何「翻页」比「切换」更贴切的站用它；工具类界面和频繁往来的列表别用 —— 一秒一次的翻页会让人晕。
参数
total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position · ease-in-out
配方
整页掀起转场 → 1.05s ease-in-out整页掀起转场 → total 1.05s · outer transform: translateY −34% · inner counter-translate + rotate −5deg · transform-origin: eye position
给 AI 的一句话
做一次整页掀起转场：转场原点取自当前视线位置（scrollY + 视口高度），外层整体上移约 34%，内层按相反方向再多移一段并旋转 −5 度，两层速度不同制造纵深；新页面从下方 100% 升到 0，整段 1.05s，两端慢中间快。