Navigation API 无刷新导航与跨文档过渡协作实践概述Navigation API 提供声明式的导航拦截与生命周期事件，支持与跨文档 View Transitions 协作实现 MPA 级动画。Chromium 已广泛支持，其他内核需回退策略。关键参数/概念（已验证）事件：`pageswap`（旧页快照前）与 `pagereveal`（新页首次渲染前）。渲染阻塞注册：在 `<head>` 使用经典脚本或 `blocking=render` 注册监听，确保首帧前执行。`navigation.activation.from/entry.url`：可根据来源与目标 URL 定制过渡类型。实践/示例<script> window.addEventListener('pagereveal', (e) => { if (!e.viewTransition) return; const from = new URL(navigation.activation.from.url); const to = new URL(navigation.activation.entry.url); const forward = to.pathname.length >= from.pathname.length; e.viewTransition.types.add(forward ? 'forward' : 'back'); }); </script> 验证方法支持性：在 Chromium 120+ 验证事件触发与类型标记；非支持内核验证降级导航。性能：采集首帧时间与过渡完成时间，比较有/无协作的体验差异。注意事项监听脚本需在首帧前执行，避免错过事件导致无法自定义过渡。与路由框架集成时避免重复状态更新，保持过渡快照一致。参考资料MDN：pageswap/pagereveal、View Transition APIChrome Docs：Cross-document view transitions
投稿
微信公众账号
微信扫一扫加关注
评论 返回
顶部
发表评论 取消回复