滚动相关 · 滚到哪、变到哪
视图转场View transition
- 整体
- 原生
- 省力
浏览器在切换前后各截一张图，自动把两张图之间的差异补成一段动画。
什么时候用它
整页或多块内容同时切换、又不想为每个元素手写动画时用它；需要精确控制单个元素时用“共享元素转场”。
参数
view-transition-name · ::view-transition-old / new · 300ms ease-in-out
配方
视图转场 → 300ms ease-in-out视图转场 → view-transition-name · ::view-transition-old / new
给 AI 的一句话
用 View Transitions API 做这次页面切换：给关键元素加 view-transition-name，在 ::view-transition-old 和 ::view-transition-new 上设 300ms ease-in-out。