跨文档 View Transitions 与导航生命周期的绑定:pageswap 与 pagereveal 之间的快照时机
跨文档视图过渡依赖浏览器在旧文档卸载前与新文档首次渲染前分别捕获快照。文章以列表页跳转详情页再返回为例,说明为什么 DOM 修改必须发生在 pageswap 同步阶段才能影响旧快照,pagereveal 中读取导航条目与恢复滚动位置的边界在哪里,并给出配置方式与降级判断。
共 3 篇文章
跨文档视图过渡依赖浏览器在旧文档卸载前与新文档首次渲染前分别捕获快照。文章以列表页跳转详情页再返回为例,说明为什么 DOM 修改必须发生在 pageswap 同步阶段才能影响旧快照,pagereveal 中读取导航条目与恢复滚动位置的边界在哪里,并给出配置方式与降级判断。
本文以 React 路由切换为例,解析 View Transitions API 在同文档(SPA)中如何捕获新旧状态快照,通过伪元素树与渲染隔离实现平滑动画。对比传统 CSS/JS 动画方案,说明其合成器线程性能优势、适用边界及回退策略。
本文以 SPA 路由切换为贯穿场景,剖析 View Transitions API 如何通过伪元素树和静态快照实现平滑过渡,重点解释跨文档过渡时快照隔离的必要性,以及同源限制、渲染阻塞与回退机制,并与 React Transition Group 等方案对比。