View Transitions API 页面过渡与导航动画实战

单页过渡示例：<button id="swap">切换</button> <div id="content">A</div> <script> const btn = document.getElementById('swap') const content = document.getElementById('content') btn.addEventListener('click', () => { document.startViewTransition(() => { content.textContent = content.textContent === 'A' ? 'B' : 'A' }) }) </script> 过渡样式：::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; } 导航过渡（示意）：// 在路由切换前后包裹 DOM 更新 async function navigate(url) { await document.startViewTransition(async () => { const html = await (await fetch(url)).text() document.body.innerHTML = html }).finished }