View Transition API 演练场 - 页面切换动画配置

Q: 什么是 View Transition API？
View Transition API 允许在 DOM 状态变化时创建平滑的动画过渡。它通过捕获前后状态的快照，自动生成过渡动画，无需手动编写复杂的动画逻辑。目前主流浏览器（Chrome 111+、Edge 111+）已支持。

Q: 如何触发视图过渡？
使用 JavaScript 调用 document.startViewTransition(callback)，在 callback 中更新 DOM。API 会自动捕获旧状态、执行回调、捕获新状态，然后在两者之间创建动画。

Q: 什么是 view-transition-name？
通过给元素设置 CSS 属性 view-transition-name，可以为该元素创建独立的命名过渡。同名元素在前后状态中会被自动关联，实现精准的元素级过渡动画。

Q: 核心 CSS 伪元素有哪些？
::view-transition-old(root) — 旧状态的根快照；::view-transition-new(root) — 新状态的根快照；::view-transition-group(root) — 过渡组容器。将 root 替换为命名即可针对特定元素。

Q: 如何自定义过渡动画？
通过覆盖上述伪元素的 animation 属性来替换默认的淡入淡出动画。可使用 @keyframes 定义任意动画效果。

Q: 浏览器不支持怎么办？
可通过检测 if ('startViewTransition' in document) 进行判断。在不支持的浏览器中，DOM 更新会立即生效，不会报错。建议结合 CSS @supports 进行渐进增强。