网页或 UI 状态切换需要平滑过渡动画且不想手写复杂动画时…

在浏览器支持的前提下，用 View Transitions API 动画化 DOM 状态变化、页面导航和共享元素过渡，并通过 CSS 与框架事件控制时序。

适用场景

解决思路

1. 用 `document.startViewTransition(callback)` 动画化任何视觉 DOM 变更，`callback` 负责把 DOM 更新到新状态。
2. 简单示例：在支持时监听 click，若 `event.target.matches("summary")`，调用 `event.preventDefault()`，找到最近的 `details`，执行 `document.startViewTransition(() => details.toggleAttribute("open"))`。
3. 使用前检查浏览器支持：`if (document.startViewTransition)`。
4. `document.startViewTransition` 会在调用 callback 前截取当前 DOM 的截图；callback 完成后浏览器在初始截图和新版本之间过渡。
5. 旧/新版本作为伪元素暴露，可用 `::view-transition-old(root)` 和 `::view-transition-new(root)` 引用。
6. 可通过给 `::view-transition-old(root), ::view-transition-new(root)` 设置 `animation-duration: 2s;` 等延长或强调过渡。
7. 给特定元素分配 CSS `view-transition-name`，并设置 `contain: layout` 或 `paint`，可让 API 对这些元素的宽高、位置等做细粒度过渡。
8. `view-transition-name` 可硬编码在 `style` 属性中，也可动态添加（如 `onclick` 处理器中），但必须在 transition 开始前添加且在当前页面唯一。
9. 照片画廊示例：给各页面同一个 `<img>` 元素相同的唯一 `view-transition-name` 和 `contain: layout`，可自动过渡照片大小与位置。
10. 为照片详情各区域设置各自的 `view-transition-name`：如 `figcaption h2 { contain: layout; view-transition-name: photo-heading; }`、`figcaption div { contain: layout; view-transition-name: photo-location-time; }`、`figcaption dl { contain: layout; view-transition-name: photo-meta; }`。
11. 每个 `view-transition-name` 会生成 transition group，覆盖页面局部区域而不是整个文档。
12. 用 `::view-transition-old(NAME)` 和 `::view-transition-new(NAME)` 定位这些局部 transition group。
13. 若某状态不存在对应元素，例如从 grid 到 photo 页时详情文本不在 grid 页，则只有 `::view-transition-new(NAME)` 而没有 `::view-transition-old(NAME)`，反向导航时相反。
14. 用 `:only-child` 伪类区分进入/退出并定制动画，例如 `::view-transition-new(photo-heading):only-child { animation: 300ms ease 50ms both fade-in, 300ms ease 50ms both slide-up; }`、`::view-transition-old(photo-heading):only-child { animation: 200ms ease 150ms both fade-out, 200ms ease 150ms both slide-down; }`。
15. 页面导航典型流程为：用户点击链接 → 请求数据 → 用响应更新 DOM。
16. 最小化屏幕冻结时间：一旦 view transition 开始，DOM 在 callback 完成前不可交互；不要用户一点击链接就启动，以免长时间冻结 UI。
17. 理想情况下在请求完成后调用 `document.startViewTransition`，这样 DOM 可尽快更新。
18. 确保更新 DOM 前已捕获初始 DOM 截图；在第三方框架中无法完全控制渲染、DOM 会在收到响应时自动更新时，需要拦截、暂停、恢复渲染，伪装成一个更新 DOM 的函数。
19. 可从 DOM 更新 callback 返回 promise，View Transitions API 会等待其 resolve 后再执行动画；用此处理时序。
20. React class component 示例用生命周期控制渲染：`shouldComponentUpdate` 返回 `false` 并启动 view transition，以争取截图捕获完成时间。
21. 在 `#updateDOM` 中调用 `this.forceUpdate()` 手动重渲染（跳过 `shouldComponentUpdate`），并返回一个 promise，在组件渲染后 resolve。
22. 在 `componentDidUpdate` 中 resolve `#rendered` promise，通知 View Transitions API DOM 已更新。
23. 不支持时跳过：React 组件 `shouldComponentUpdate` 中 `if (!document.startViewTransition) return true;`。
24. 在 Next.js 中，为使用该流程，先在 `next.config.js` 设置 `reactStrictMode: false` 禁用 React strict mode；strict mode 会渲染两次，干扰开发中的 `ViewTransition` 渲染流程。
25. 再在 `pages/_app.js` 中用 `ViewTransition` 包裹 `Component`，并用 `StrictMode` 包裹子组件，即 `<ViewTransition><StrictMode><Component {...pageProps} /></StrictMode></ViewTransition>`。
26. 替代方案（不用 View Transitions）：点击链接后立即动画移出元素，同时发起数据请求；等待响应和退出动画都完成；再动画移入响应。
27. 替代方案好处：点击后立即有反馈，为请求完成争取时间；缺点是退出动画时还没有新 HTML，不能真正把元素从旧状态过渡到新状态。
28. 选择方案：如果两页有共享元素，可用 view transition；如果变化很大且共享元素很少，可用退出动画带来的即时反馈。
29. 实现替代方案需接入路由事件，在用户导航时收到通知；Next.js 可用 `routeChangeStart` 路由事件开始退出动画。
30. 对服务端渲染多页应用，可用 Turbo + Turn：Turbo 捕获链接点击和表单提交，用 JavaScript 发请求，并用响应中的新 `<body>` 替换当前 `<body>`。
31. 用 Turn 动画页面导航：给要动画的元素添加 `data-turn-exit` 和 `data-turn-enter` 属性，然后写 CSS。
32. CSS 示例：`html.turn-exit [data-turn-exit] { animation-name: fade-out; animation-duration: 0.3s; animation-fill-mode: forwards; }`，`html.turn-enter [data-turn-enter] { animation-name: fade-in; animation-duration: 0.6s; animation-fill-mode: forwards; }`，并定义 `@keyframes fade-out`、`@keyframes fade-in`。
33. 在应用 JavaScript 中导入 `Turn` 并调用 `Turn.start()`。
34. Turn 通过 Turbo 渲染事件控制流程：`turbo:visit` 时在请求开始前添加 `turn-exit` class。
35. `turbo:before-render` 时，在请求完成但新 HTML 渲染前暂停渲染，等待退出动画完成。
36. `turbo:render` 时，新 HTML 渲染后移除 `turn-exit` class 并添加 `turn-enter` class。
37. 退出动画完成后移除 `turn-enter` class。
38. Turn 实验性支持 view transitions：设置 `Turn.config.experimental.viewTransitions = true`，支持时用 view transitions，不支持时回退到 CSS 动画方案。
39. 总结做法：页面过渡用于传达页面变化；向内建 View Transitions API 提供旧/新状态，并通过框架事件通知状态变化；页面导航最好在请求完成后过渡，避免 DOM 非活动；也可立即执行退出动画作为替代或补充。
40. 注意 Next.js App Router 在写作时处于 beta，相关最佳实践可能变化。
41. React 文档不建议使用 `shouldComponentUpdate` 和 `forceUpdate`，称其只应用于性能优化，且 `shouldComponentUpdate` 不保证被调用；因为页面动画是增强功能，且即使 `shouldComponentUpdate` 未被调用组件也能工作，所以该注意事项可接受。
42. 注意 View Transitions API 计划支持多页导航（无需 JavaScript），但更高级过渡可能仍需要 JavaScript API。

适用边界 · 注意事项

• 当目标浏览器不支持 View Transitions API 且未提供 CSS 动画或其它 fallback 时，不要依赖该 API。
• 当页面导航几乎没有共享元素、且希望用户点击后立刻有反馈时，不要只等待新 HTML 再做 view transition；改用立即退出动画或加载反馈。
• 不要让 view transition 在用户点击后等待请求期间保持 DOM 冻结；应先完成数据请求，或使用替代的退出动画方案。