Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(zh-cn): update view-transitions.mdx #9292

Merged
merged 8 commits into from
Sep 3, 2024
Merged

i18n(zh-cn): update view-transitions.mdx #9292

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
df4f248
i18n(zh-cn): update `view-transitions.mdx`
liruifengv Sep 3, 2024
f8cebfa
Update src/content/docs/zh-cn/guides/view-transitions.mdx
liruifengv Sep 3, 2024
c72e4a5
Update src/content/docs/zh-cn/guides/view-transitions.mdx
liruifengv Sep 3, 2024
c4f71c4
Update src/content/docs/zh-cn/guides/view-transitions.mdx
liruifengv Sep 3, 2024
e90c015
Update src/content/docs/zh-cn/guides/view-transitions.mdx
liruifengv Sep 3, 2024
2de0148
Update src/content/docs/zh-cn/guides/view-transitions.mdx
liruifengv Sep 3, 2024
0fd1e49
Merge branch 'main' into view-transitions-update
yanthomasdev Sep 3, 2024
fb626ad
Fix missing spacing
yanthomasdev Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 40 additions & 13 deletions src/content/docs/zh-cn/guides/view-transitions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ Astro 的视图过渡动画支持由新的 [View Transitions](https://developer.
默认情况下，每个页面都将使用常规的、全页的浏览器导航。你必须选择视图过渡动画，并且可以在每个页面或整个站点上使用它们。
:::

## 向页面添加视图过渡动画
## 向页面添加���图过渡动画
liruifengv marked this conversation as resolved.
Show resolved Hide resolved

通过在每个页面的 `<head>` 中导入和添加 `<ViewTransitions />` 路由组件，可以选择在单个页面上使用视图过渡动画。
通��在每个页面的 `<head>` 中导入和添加 `<ViewTransitions />` 路由组件，可以选择在单个页面上使用视图过渡动画。
liruifengv marked this conversation as resolved.
Show resolved Hide resolved
liruifengv marked this conversation as resolved.
Show resolved Hide resolved

```astro title="src/pages/index.astro" ins={2,7}
---
Expand Down Expand Up @@ -110,7 +110,7 @@ Astro 会自动为在旧页面和新页面中找到的相应元素并分配一
</video>
```

你也可以将指令放在一个 [Astro 群岛](/zh-cn/concepts/islands/) 上（即带有 [`client:` 指令](/zh-cn/reference/directives-reference/#客户端指令) 的 UI 框架组件）。如果该组件存在于下一个页面上，旧页面上的岛屿与其**当前状态**将继续显示，而不是用新页上的岛屿替换它。
你也可以将指令放在一个 [Astro 群岛](/zh-cn/concepts/islands/) 上（即带有 [`client:` 指令](/zh-cn/reference/directives-reference/#客户端指令) 的 UI 框架组���）。如果该组件存在于下一个页面上，旧页面上的岛屿与其**当前状态**将继续显示，而不是用新页上的岛屿替换它。
liruifengv marked this conversation as resolved.
Show resolved Hide resolved

在下面的示例中，当在包含具有 `transition:persist` 属性的 `<Counter />` 组件的页面之间来回导航时，组件内部状态的计数不会重置。

Expand Down Expand Up @@ -319,8 +319,8 @@ const customTransition = {
<script>
import { navigate } from 'astro:transitions/client';
// 自动导航到所选选项
document.querySelector('select').onchange = (ev) => {
let href = ev.target.value;
document.querySelector('select').onchange = (event) => {
let href = event.target.value;
navigate(href);
};
</script>
Expand Down Expand Up @@ -564,9 +564,9 @@ Astro 的视图过渡动画 API 生命周期事件顺序如下：

```js
<script is:inline>
document.addEventListener('astro:before-preparation', ev => {
const originalLoader = ev.loader;
ev.loader = async function() {
document.addEventListener('astro:before-preparation', event => {
const originalLoader = event.loader;
event.loader = async function() {
const { startSpinner } = await import('./spinner.js');
const stop = startSpinner();
await originalLoader();
Expand Down Expand Up @@ -613,9 +613,9 @@ Astro 的视图过渡动画 API 生命周期事件顺序如下：

setDarkMode(document);

document.addEventListener('astro:before-swap', ev => {
document.addEventListener('astro:before-swap', event => {
// Pass the incoming document to set the theme on it
liruifengv marked this conversation as resolved.
Show resolved Hide resolved
setDarkMode(ev.newDocument);
setDarkMode(event.newDocument);
});
</script>
```
Expand All @@ -626,14 +626,41 @@ Astro 的视图过渡动画 API 生命周期事件顺序如下：

```astro
<script is:inline>
document.addEventListener('astro:before-swap', ev => {
ev.swap = () => {
diff(document, ev.newDocument);
document.addEventListener('astro:before-swap', event => {
event.swap = () => {
diff(document, event.newDocument);
};
});
</script>
```

#### 构建自定义交换函数

<p><Since v="4.15.0" /></p>

`astro:transitions/client` 模块的 `swapFunctions` 对象提供了五个处理特定交换相关任务的工具函数,包括处理文档属性、页面元素和脚本执行。这些函数可以直接用于定义自定义的交换实现。

以下示例演示了如何使用这些函数重新创建 Astro 的内置交换实现:
liruifengv marked this conversation as resolved.
Show resolved Hide resolved

```astro
<script>
import { swapFunctions } from 'astro:transitions/client';
// 用 doc 替换 window.document
function mySwap(doc: Document) {
swapFunctions.deselectScripts(doc);
swapFunctions.swapRootAttributes(doc);
swapFunctions.swapHeadElements(doc);
const restoreFocusFunction = swapFunctions.saveFocus();
swapFunctions.swapBodyElement(doc.body, document.body);
restoreFocusFunction();
};
...
event.swap = () => mySwap(event.newDocument);
...
yanthomasdev marked this conversation as resolved.
Show resolved Hide resolved
<script>
```
自定义交换实现可以从这个模板开始，并根据需要添加或替换单个步骤的自定义逻辑。

### `astro:after-swap`

在新页面替换旧页面后立即触发的事件。你可以在 `document` 上监听此事件，并触发在新页面的 DOM 元素渲染和脚本运行之前发生的操作。
Expand Down
Loading