EPISODE · Sep 6, 2025 · 18 MIN
给我整上Page View Transition
from 给我整 growgen · host 宫不上
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 的思路干扰 结语这一周最大的收获是：👉 不要被过时的知识和工具牵着走，相信自己的判断。 下周见！
Embed this episode
Ready to play
给我整上Page View Transition
No transcript for this episode yet
Similar Episodes
No similar episodes found.
Similar Podcasts
No similar podcasts found.