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 实现其实很简单：
  • 给元素加 view-transition-name 标识
• 难点在于：如何理解历史架构差异、避免被 SPA/MPA 的思路干扰

结语

这一周最大的收获是：
👉 不要被过时的知识和工具牵着走，相信自己的判断。

下周见！