アストロの遷移を表示します

アストロでの変換を見る：スムーズなページ切り替えのための強力なツール

この記事は、Astroのビュー変換機能を導入するSitePoint Premiumの本「Astroの力を解き放つ」から抜粋しています。

ビュー変換APIは、単一の操作でDOMコンテンツを同時に更新し、個々のDOM状態間でアニメーション変換効果を生成するための便利な方法を提供します。これを過去にWebに実装することは非常に困難でしたが、この新しいAPIでは、変換はかなり簡単になりました。調査によると、View Conversion APIを使用すると、Webサイトの知覚されたパフォーマンスが高速化される可能性があります。

Astroはビュー変換をネイティブにサポートし、現在このAPIをサポートしていないブラウザをサポートするためのフォールバックメカニズムが組み込まれています。

このネイティブソリューションは、組み込みのアニメーション、フロントおよびバックナビゲーションのアニメーション、自動アクセシビリティサポート（

経由）、その他多くの機能をサポートしています。 prefers-reduced-motion

コンバージョンを表示する最良の方法の1つは、ページ変換の間に状態を維持するビデオ要素を使用することです。 （また、

ディレクティブを使用してコンポーネント間で状態を維持できることに注意してください。）以下のビデオには、例が示されています。 client:*

次のことを含む

コンポーネントがあるとします。 <video></video> 上記のコードでは、Cloudinaryからビデオが表示されます。さらに、動画が再生後に自動的に再生およびループできるようにし、ユーザーにコントロールボタンを提供します。これらの設定は、このビデオコンポーネントに送信されるプロパティによって決定され、これらのプロパティが提供されていない場合、デフォルト値が使用されます。次に、これらの変数がHTML

要素に追加されます。

<code>---
// src/components/Video
const src = 'https://res.cloudinary.com/tamas-demo/video/upload/f_auto,q_auto/imagecon/ship.mp4';
const {
  autoplay = false,
  controls = true,
  loop = false
} = Astro.props;
---

<video transition:persist=""></video></code>

<video></video>コマンドに注意してください。このコマンドを使用すると、ビデオプレーヤーに移行の合間に維持します。次のページに移動すると、ビデオが再生され、残りのページに更新されたコンテンツが表示されます。このコンポーネントを

および

ページで使用できます：transition:persist index.astro about.astro最後に、ページ変換を有効にする必要があります。これは、各ページまたはプロジェクト全体でグローバルに有効にすることができます。ある種のレイアウトファイルがあると仮定すると、

をインポートすることで簡単に有効にできます。

<code>// src/pages/index.astro
---
import Video from '../components/Video.astro';
---

<video></video></code>

要約すると、実験的なビュー変換APIは、CSS擬似要素、JavaScript、および前後のDOM状態のスナップショットを通じて、異なるページまたは要素間の視覚的変換を簡素化します。ページ認識パフォーマンスを強化し、複雑なカスタムJavaScriptとCSSの依存関係を最小限に抑える新しい機会を提供します。

以上がアストロの遷移を表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。