Astro 2.9: 视图过渡（实验性）| Astro 框架

Astro 2.9 发布了，带来了对视图过渡的实验性支持，以及重定向配置和改进的脚本捆绑。

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

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

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

视图过渡（实验性）

观看 Ben Holmes 解释新的视图过渡功能。

Astro 现在通过新的 <ViewTransitions /> 组件和 transition:animate 指令支持视图过渡。享受更平滑的过渡效果，这在以前需要客户端路由，现在则无需牺牲 MPA 的简洁性。

通过在您的配置中添加实验性标志，在 Astro 2.9 中启用视图过渡支持

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    viewTransitions: true,
  },
});

这是一个组件，作为页面之间过渡的路由器。将其添加到需要发生过渡的每个独立页面的 <head> 部分，以便在您导航到另一个页面时，过渡在客户端发生，而不是导致浏览器完全刷新页面。

要在整个应用程序中启用支持（SPA 模式），请将此组件添加到针对每个页面 <head> 的通用布局或组件中。

CommonHead.astro

---
import { ViewTransitions } from 'astro:transitions';
---

<meta charset="utf-8" />
<title>{Astro.props.title}</title>
<ViewTransitions />

只需此项更改，您的应用程序现在将完全在客户端路由。然后，您可以使用 transition:animate 指令为单个元素添加过渡效果。

将 transition:animate 添加到任何元素，以使用 Astro 的内置动画。

<header transition:animate="slide"></header>

在上面，Astro 的 slide 动画将使 <header> 元素从左侧滑入，并在您离开页面时滑出到右侧。

您还可以使用任何 CSS 动画属性自定义这些动画，例如，通过指定持续时间

---
import { slide } from 'astro:transition';
---

<header transition:animate={slide({ duration: 200 })}></header>

查阅客户端路由文档以了解更多信息。

redirects 配置选项不再是实验性的了！如果您之前使用了实验性的重定向，请移除以下实验性标志

import { defineConfig } from 'astro/config';

export default defineConfig({
  experimental: {
    redirects: true,
  }
});

如果您一直在等待重定向功能稳定后再使用，那现在无需再等待了！您现在可以在您的项目中安全地使用重定向。查阅重定向文档，了解如何使用此内置功能。

在您的配置中，添加一个旧路径和新路径的映射，用于指定重定向来源和目标

import { defineConfig } from 'astro/config';

export default defineConfig({
  redirects: {
    '/old-page': '/new-page'
  }
});

Astro 用于确定哪些 <script> 标签应捆绑在一起的静态分析变得更智能了！

Astro 会创建捆绑包，优化页面之间的脚本使用，并将它们放在文档的头部，以便尽早下载。Astro 现有方法的一个限制是您无法动态使用提升的脚本。当使用重新导出组件的库时，无论该页面是否需要所有脚本，每个页面都会收到相同的、包含所有内容的捆绑包。

现在，Astro 改进了静态分析，以便考虑实际使用的导入。

例如，Astro 以前会为以下重新导出多个组件的库捆绑来自 <Tab> 和 <Accordion> 组件的 <script> 脚本

@matthewp/my-astro-lib

export { default as Tabs } from './Tabs.astro';
export { default as Accordion } from './Accordion.astro';

现在，当 Astro 页面仅使用单个组件时，Astro 将只向该页面发送必要的脚本。仅导入 <Accordion> 组件的页面将不会收到任何 <Tab> 组件的脚本。

---
import { Accordion } from '@matthewp/my-astro-lib';
---

Astro 现在支持这种常见的库重新导出模式，您应该会看到更高效的性能。

感谢社区贡献者 Ottomated 为这项新功能所做的工作。

此版本包含额外的错误修复和集成功能。查阅发布说明以了解更多信息。