Astro View Transitions 如何工作？怎么避免页面过渡踩坑？

Astro View Transitions 的核心是：页面仍然按多页应用导航，但 Astro 在跳转时拦截链接、获取新页面、替换 DOM，并借助浏览器 View Transitions API 做过渡动画。它给静态站带来接近 SPA 的切页手感，但不等于把站点变成完整 SPA；SEO、静态输出和按页加载的优势仍保留。

追问

View Transitions 和 SPA 路由有什么区别？

SPA 通常只替换客户端状态和组件树。Astro 更像增强版 MPA 导航，新页面仍是单独文档，只是在切换时接管加载和替换过程。

为什么脚本状态会丢？

导航后 DOM 会被替换，旧节点上的事件和第三方实例可能不存在。需要在 astro:page-load 里重新初始化必要脚本。

transition:name 有什么边界？

同一次过渡里名称应当唯一。列表页要用 slug 或 id 拼接名称，不要所有卡片都叫 cover。

什么时候不该使用页面过渡？

表单提交、支付、登录回调、后台管理不适合花哨动画。内容站、作品集、相册更适合，但也要控制范围。

写段代码

astro
<ViewTransitions />
<img src={post.cover} transition:name={`cover-${post.slug}`} />