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.

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
51 changes: 40 additions & 11 deletions src/content/docs/zh-cn/guides/view-transitions.mdx
Original file line number Diff line number Diff line change
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 => {
// Pass the incoming document to set the theme on it
setDarkMode(ev.newDocument);
document.addEventListener('astro:before-swap', event => {
// 传入新文档以设置主题
setDarkMode(event.newDocument);
});
</script>
```
Expand All @@ -626,14 +626,43 @@ 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 的内置交换实现:

```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);
...
<script>
```
自定义交换实现可以从这个模板开始,并根据需要添加或替换单个步骤的自定义逻辑。

### `astro:after-swap`

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