::view-transition-new(root) 必须用 animation 而非 transition，因其为快照层、无 dom 生命周期，仅支持 opacity 和 transform 等可合成属性动画，需搭配 @keyframes 与 animation-fill-mode: forwards 才能正确显示。
::view-transition-new(root) 必须用 animation，不能用 transition
直接写 transition: opacity 0.3s 在 ::view-transition-new(root) 上完全无效——这个伪元素不响应 CSS transition，只接受 animation。浏览器在视图过渡中是靠帧动画驱动两层快照叠加的，transition 没有触发时机和起止状态上下文。
-
::view-transition-new(root)是一个“新页面快照层”，它本身没有 DOM 生命周期，只有入场动画帧 - 必须搭配
@keyframes定义，且动画需含both或forwards，否则动画结束瞬间快照会消失或回退 - 动画时长必须与
::view-transition-old(root)匹配，否则会出现“旧页已走、新页未显”的空白帧
支持的 CSS 属性有限，优先用 transform + opacity
不是所有属性都能在快照层上做动画。浏览器只对部分可合成（composited）属性做 GPU 加速，其他会强制 Layout 或静默降级。
- ✅ 安全可用：
opacity、transform（translateX/translateY/scale）、clip-path - ❌ 避免使用：
height、width、top、left、background-color（会触发 Layout 或 paint，卡顿明显） - ⚠️
filter可用但耗性能，尤其blur()，建议仅用于短时轻量效果
命名过渡时 ::view-transition-new(name) 的选择器限制
如果你给某个元素加了 view-transition-name="hero"，那对应的 ::view-transition-new(hero) 只能控制该元素的新快照层——但它不能继承父级样式，也不能用后代选择器（如 .hero img）。
- 伪元素作用域严格限定为“该命名元素的快照”，无法穿透到子元素
- 动画必须写在
::view-transition-new(hero)本身，比如transform: scale(1.2)，而不是试图改里面文字颜色 - 多个命名元素可共用同一组
@keyframes，但不能用通配符或类名组合选择器，例如.card ::view-transition-new(hero)会被浏览器忽略
动画延迟和 timing-function 容易被忽略
默认情况下，::view-transition-new(root) 动画和旧页动画是同步启动的。但有时你想让新页“稍晚一点入场”，比如等旧页滑出一半再开始淡入——这得靠 animation-delay，而不是 JS 控制。
- 设
animation-delay: 0.15s可制造错峰入场感，但总时长仍需保持一致（如都为0.4s），否则过渡会撕裂 -
ease-out比ease-in更适合新页入场，视觉上更自然；spring(1 80 -10 0)这类自定义缓动目前仅 Chromium 支持，Firefox/WebKit 尚未落地 - 动画结束后记得加
animation-fill-mode: forwards，否则快照层会在动画结束瞬间透明或归位，导致内容闪一下才真正显示
getBoundingClientRect() 或监听 resize）在动画过程中都拿不到准确值。如果动画里要联动滚动或视口检测，得等 transition.finished Promise 解析后再操作。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
