给我整上Page View Transition

Update: 2025-09-06

Description

Shownotes – 第37周播客 (2025年9月6日)

本周我终于完成了一件从 2023 年就想做的事情 —— Page View Transition 动画效果。

从 Gatsby 到 Astro，再到浏览器原生的支持，这一路踩过不少坑，也让我重新思考了 SPA (单页应用) 和 MPA (多页应用) 的架构差异，以及在新技术下如何避免被历史包袱和过时文档误导。

背景
- 早期网站：Jekyll → Gatsby (为体验 GraphQL)
- 后来转到 Astro：因为它支持 React、Vue、Solid 等多技术栈混合使用
- Astro 独特的 Island 模型：局部用组件框架，其余部分保持轻量
Page View Transition 的兴起
- 早期只能用 JS 模拟动画，体验差、性能差
- 2023 年浏览器推出 原生跨页面动画 API：CSS + JS 轻量调用
- Astro 第一时间集成，展示了视频/元素跨页面平滑过渡的酷炫效果
SPA vs MPA 的困境
- SPA 优点：模拟原生应用交互
- 缺点：状态混乱、每页不是独立沙箱
- MPA 优点：页面无状态、架构更清晰
- 问题：文档和 AI 答案大多只偏向 SPA，MPA 方案少
踩坑记录
1. 浏览器支持：
  - 2023 年时只能在 Chrome Canary 开 flag
  - 2025 年现在 Chrome & Safari 都原生支持
2. Astro 的兼容性处理：
  - 启用 Page View Transition 会把网站强制转为 SPA
  - 导致状态混乱、逻辑 bug
3. Vite 开发模式：
  - Dev 模式下没打包，产生重复 ID → 动画失效
  - 解决：必须打包后在 Production 模式下测试
4. 个人环境问题：
  - 因为关掉了电脑的系统动画 → 测试时完全没显示效果 😂
AI 与前端快节奏的矛盾
- 多个 AI 给出的都是 错误或过时的答案
- 甚至强行说 MPA 不存在
- 新技术生命周期短，AI 文档滞后 → 只能靠自己判断

技术演进太快，AI 与文档往往落后，不一定可靠
前端开发中，相信自己的经验与直觉 比盲从建议更重要
Page View Transition 实现其实很简单：
- <html view-transition-navigation="auto">
- 给元素加 view-transition-name 标识
难点在于：如何理解历史架构差异、避免被 SPA/MPA 的思路干扰