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 方案少
踩坑记录
- 浏览器支持：
- 2023 年时只能在 Chrome Canary 开 flag
- 2025 年现在 Chrome & Safari 都原生支持
- Astro 的兼容性处理：
- 启用 Page View Transition 会把网站强制转为 SPA
- 导致状态混乱、逻辑 bug
- Vite 开发模式：
- Dev 模式下没打包，产生重复 ID → 动画失效
- 解决：必须打包后在 Production 模式下测试
- 个人环境问题：
- 因为关掉了电脑的系统动画 → 测试时完全没显示效果 😂
AI 与前端快节奏的矛盾
- 多个 AI 给出的都是 错误或过时的答案
- 甚至强行说 MPA 不存在
- 新技术生命周期短，AI 文档滞后 → 只能靠自己判断
本周心得
- 技术演进太快，AI 与文档往往落后，不一定可靠
- 前端开发中，相信自己的经验与直觉 比盲从建议更重要
- Page View Transition 实现其实很简单：
<html view-transition-navigation="auto"> - 给元素加
view-transition-name 标识
- 难点在于：如何理解历史架构差异、避免被 SPA/MPA 的思路干扰
结语
这一周最大的收获是：
👉 不要被过时的知识和工具牵着走，相信自己的判断。
下周见！
