Astro 2.10: 视图过渡中的持久状态

Astro 2.10 已发布，其中包含了对我们实验性的视图过渡支持的改进。此外，我们还发布了 Astro 3.0 的首个早期测试版。继续阅读以了解更多信息！

视图过渡中的持久化 UI
Astro 3.0 初探

如果您已经安装了 Astro，您可以通过在项目中运行升级命令（使用您选择的包管理器）将其升级到 2.10

npm install astro@latest
pnpm upgrade astro --latest
yarn upgrade astro --latest

顺便说一下，也请升级您安装的任何 @astrojs/* 集成和适配器！

视图过渡中的持久化 UI

我们首次发布的 <ViewTransition /> 路由器带来了页面间的平滑过渡，但仍然导致任何有状态的 islands 或元素被重新渲染。

在 2.10 中，我们为 API 添加了一个新的 transition:persist 指令来解决这个问题。

使用此指令，您可以在过渡到新页面时保留旧页面中 DOM 元素和 islands 的状态。这里有一个演示。

例如，要在页面导航时保持视频播放，请将 transition:persist 添加到该元素

<video controls="" autoplay="" transition:persist>
  <source
    src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4"
    type="video/mp4"
  />
</video>

这个 <video> 元素及其当前状态将被转移到下一个页面（如果视频在该页面上也存在）。

同样，此功能适用于任何客户端框架组件 island。在此示例中，计数器的状态被保留并转移到新页面

<Counter count={5} client:load transition:persist />

请参阅我们的视图过渡指南以了解更多用法。

Astro 3.0 初探

我们已发布 Astro 3.0 的首个测试版，即 astro@3.0.0-beta.0。如果您勇于尝试，今天就可以体验！到目前为止，此版本主要包含废弃和移除非常旧的模式。但是，您可能会遇到一些兼容性问题或破坏性更改。请注意，这个早期预览版正在迅速变化！

一些值得注意的变化包括

HTML 现在默认进行压缩。
API 路由现在使用大写的方法名，例如：export function GET() ...
适配器可以告知 Astro 它们支持哪些功能，例如按页面分割入口点以及 Sharp / Squoosh 兼容性。

请查看更新日志以获取完整的更改列表。我们目前还没有关于破坏性更改的文档，但正在制作一份指南。随着 3.0 版本的临近，将会有更多关于这些更改的信息。

一旦所有破坏性更改完成，您就可以期待一个发布候选版本，我们希望在八月底/九月初发布稳定的 3.0 版本。

此版本还包括其他错误修复和集成功能。请查看发布说明以了解更多信息。