给我整 growgen

给我整上Page View Transition


Listen Later

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 的思路干扰
结语

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

下周见!

...more
View all episodesView all episodes
Download on the App Store

给我整 growgenBy 宫不上