::view-transition-new(root) 必须配合 startviewtransition() 才生效，单独写 css 不触发动画；它仅作用于 root，不可组合选择器；动画仅支持 transform、opacity 等 gpu 友好属性；mpa 中需显式启用 navigation 选项。
::view-transition-new(root) 必须配合 startViewTransition() 才生效
单独写 ::view-transition-new(root) 样式不会触发任何动画——浏览器只在 document.startViewTransition() 成功捕获 DOM 更新后，才生成对应的伪元素并应用样式。如果你发现动画没动，第一反应不是查 CSS 写错，而是确认 JS 是否真的调用了 startViewTransition()，且回调里完成了同步 DOM 更新。
- ✅ 正确流程：点击 →
startViewTransition(() => { el.classList.toggle('active'); })→ 浏览器拍快照 → 应用::view-transition-new(root) - ❌ 常见错误：只写了 CSS，但 JS 里用
setTimeout或fetch().then延迟改 class，导致过渡被跳过或抛InvalidStateError - ⚠️ 注意：
startViewTransition()返回的是ViewTransition对象，不是 Promise（除非传入 async 回调），别误写成await document.startViewTransition(...)而没加 async
::view-transition-new(root) 只能作用于 root，不能组合选择器
::view-transition-new(root) 是浏览器生成的临时伪元素，它不继承 DOM 结构层级，也不响应常规选择器逻辑。写成 .theme-dark ::view-transition-new(root) 或 body ::view-transition-new(root) 都会被忽略——CSS 引擎根本不会匹配。
- 只能用
::view-transition-old(root)和::view-transition-new(root)这两个固定形式 - 命名视图需额外加
view-transition-name属性，例如<main view-transition-name="content"></main>，对应伪元素才是::view-transition-new(content) - 如果想控制局部区域而非整页，必须用命名视图，不能靠父容器类名“筛选”
animation 里只能用 transform、opacity 等 GPU 友好属性
::view-transition-new(root) 的 animation 如果包含 height、top、left 或 background-color（未声明 color scheme 时），容易卡顿甚至掉帧。浏览器对这类伪元素的渲染优化集中在合成层，非合成属性会强制重排。
- 推荐写法：
animation: slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);，其中@keyframes slide-in { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } - 避免写
from { height: 0; }—— 它无法被硬件加速，且伪元素初始尺寸不可控 - 不要试图用
filter: blur()做入场模糊，部分 Chrome 版本中该属性在伪元素上表现不稳定
多页面导航中 ::view-transition-new(root) 的行为差异
在 MPA（多页应用）场景下，::view-transition-new(root) 的触发时机和生命周期和 SPA 不同：它只在导航目标页面完成 HTML 解析、DOMContentLoaded 触发后才可用；而旧页面的 ::view-transition-old(root) 会在 unload 前短暂存在。这意味着你不能指望它像单页内切换那样精确控制两帧之间的衔接。
- MPA 中，
startViewTransition()必须在navigation模式下显式启用：document.startViewTransition(() => {}, { navigation: true }) - 服务端渲染页面若含内联 script 修改 DOM，需确保脚本执行在
startViewTransition()之后，否则快照可能捕获到中间态 - 跨域 iframe 或 sandbox 页面不支持 View Transitions，伪元素不会生成
::view-transition-new(root) 控制全页，::view-transition-new(xxx) 控制局部，二者不能叠加生效，选错一个就等于动画失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
