diff --git a/src/content/docs/ja/guides/view-transitions.mdx b/src/content/docs/ja/guides/view-transitions.mdx index 276133a30851a..1487e18c8e933 100644 --- a/src/content/docs/ja/guides/view-transitions.mdx +++ b/src/content/docs/ja/guides/view-transitions.mdx @@ -4,12 +4,13 @@ description: >- ビュートランジションを使用して、Astroでページ間のシームレスなナビゲーションを実現する。 i18nReady: true --- - import Since from '~/components/Since.astro' +import { Steps } from '@astrojs/starlight/components' +import SourcePR from '~/components/SourcePR.astro' Astroでは、**オプトイン式ページ単位のビュートランジション**を数行のコードで実現できます。ビュートランジションは、ブラウザがナビゲーション時に通常おこなうページ全体の更新なしでページコンテンツを更新し、ページ間のシームレスなアニメーションを提供します。 -Astroは、単一のページの``に追加可能な``ルーティングコンポーネントを提供しており、これにより別のページに移動する際のページ遷移を制御できます。このコンポーネントは軽量なクライアントサイドルーターを提供し、[ナビゲーションをインターセプト](#クライアントサイドナビゲーションの流れ)してページ間の遷移をカスタマイズできるようにします。 +Astroは、単一のページの``に追加可能な``ルーティングコンポーネントを提供しており、これにより別のページに移動する際のページ遷移を制御できます。このコンポーネントは軽量なクライアントサイドルーターを提供し、[ナビゲーションをインターセプト](#クライアントサイドナビゲーションの流れ)してページ間の遷移をカスタマイズできるようにします。 このコンポーネントを共通のヘッドやレイアウトなど再利用可能な`.astro`コンポーネントに追加すると、サイト全体でのアニメーション付きのページ遷移（SPAモード）が可能になります。 @@ -28,16 +29,16 @@ Astroのビュートランジションは新しい[View Transitions](https://dev ## ページにビュートランジションを追加する -`ViewTransitions />`ルーティングコンポーネントをインポートし、``内に追加することで、ビュートランジションを個別のページで有効化できます。 +``ルーティングコンポーネントをインポートし、``内に追加することで、ビュートランジションを個別のページで有効化できます。 ```astro title="src/pages/index.astro" ins={2,7} --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- 私のホームページ - +

私のウェブサイトへようこそ！

@@ -47,13 +48,13 @@ import { ViewTransitions } from 'astro:transitions'; ## サイト全体でのビュートランジション（SPAモード） -``をインポートし、共通の``または共有のレイアウトコンポーネントに追加します。Astroは、旧ページと新ページの類似点に基づいてデフォルトのページアニメーションを作成し、サポートされていないブラウザに対するフォールバック動作も提供します。 +``をインポートし、共通の``または共有のレイアウトコンポーネントに追加します。Astroは、旧ページと新ページの類似点に基づいてデフォルトのページアニメーションを作成し、サポートされていないブラウザに対するフォールバック動作も提供します。 以下の例では、このコンポーネントをインポートし`` Astroコンポーネントに追加することで、Astroのデフォルトのページナビゲーションアニメーションをサイト全体に追加しています。これにより、サポートされていないブラウザに対するフォールバック動作も追加されます。 ```astro title="components/CommonHead.astro" ins={2,12} --- -import { ViewTransitions } from 'astro:transitions'; +import { ClientRouter } from 'astro:transitions'; --- @@ -63,7 +64,7 @@ import { ViewTransitions } from 'astro:transitions'; - + ``` Astroのデフォルトのクライアントサイドナビゲーションを有効にするために、他に必要な設定はありません！ @@ -80,7 +81,6 @@ Astroは、旧ページと新ページの両方に存在する対応する要素 - `transition:animate`: アニメーションの種類を指定することで、旧要素を新要素で置き換える際のAstroのデフォルトのアニメーションをオーバーライドできます。Astroの[組み込みのアニメーションディレクティブ](#組み込みのアニメーションディレクティブ)を使用するか、[独自のトランジションアニメーションを作成](#アニメーションをカスタマイズする)します。 - `transition:persist`: 旧要素を新要素で置き換えるAstroのデフォルトの挙動をオーバーライドし、[別のページに移動した際にコンポーネントとHTML要素を保持](#状態を保持する)します。 - ### トランジションに名前を付ける 場合によっては、対応するビュートランジション要素を自分で特定したい、または特定する必要があるかもしれません。`transition:name`ディレクティブを使用して、要素のペアに名前を付けることができます。 @@ -133,6 +133,16 @@ Astroは、旧ページと新ページの両方に存在する対応する要素