ビュートランジションAPIの紹介

トランジションAPIを表示：Webアニメーションを簡素化するための革新的なテクノロジー

[トランジションAPIの表示]は、Webページ要素間でアニメーションを実現するためのより簡単な方法を提供し、ページの負荷間であってもスムーズな遷移を可能にします。これは、適切な互換性を備えた進歩的な強化技術です。

従来のCSSの移行とアニメーションは、Webエフェクトで顕著な成果を達成しましたが、すべてのアニメーションが簡単に実装できるわけではありません。たとえば、10個の画像とタイトルのリストのクロスフェードアニメーションには、次の手順が必要です。

古いdom要素を保持します
1. 新しいDOM要素を作成し、ページの適切な場所に追加します
新しい要素をフェードしながら古い要素を排除します
2. （オプション）古い要素を新しいDOM要素に置き換えます。
ビュー遷移APIはこのプロセスを簡素化します：

APIは、現在のページステータスのスナップショットをキャプチャします

DOMを更新する、必要な要素を追加または削除します

APIは、新しいページステータスのスナップショットをキャプチャします

APIは、デフォルトのフェードエフェクトまたはカスタムCSSアニメーションを使用して、2つの状態間の遷移をアニメーション化します。
2. 余分な複雑な手順なしでDOMを更新する必要があります。わずか数行のコードを使用すると、ビュートランジションAPIをサポートするブラウザで美しくスライドのようなアニメーションを実現できます。
現在、APIは実験段階にありますが、最新のChromiumベースのブラウザーはすでにシングルページDOMアニメーション効果をサポートしています。 Chrome 115以降は、典型的なWordPressサイトなどのページロード間のアニメーションもサポートしています。これにより、JavaScriptコードなしでは簡単に使用できます。

MozillaとAppleは、FirefoxとSafariでAPIを実装する計画を発表していないことに注意する必要があります。 View Transitions APIをサポートしていないブラウザはまだ適切に機能するため、この効果を今すぐ追加することは安全です。

新しいテクノロジーと古いテクノロジーの比較

上級開発者は馴染みがあるかもしれません。 1997年にリリースされたInternet Explorer 4.0は、要素とフルページの遷移機能を導入し、2000年にリリースされたIE5.5で更新されました。

タグを使用して、PowerPointスタイルでさまざまな遷移効果を追加できます。

しかし、このテクノロジーはWeb標準ではないため、広く採用されていません。

ページ内で遷移効果を作成します

<meta>

次の例は、ChromeのView Transitions APIを使用して単純なフェードエフェクトを作成する方法を示しています。

<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit">

（Codepenのリンクとスクリーンショット例1はここに埋め込まれている必要があります）

HTMLコードには、異なるコンテンツブロックを表示するために使用される2つの要素が含まれています。

（HTMLコードスニペットはここに埋め込まれている必要があります）

switchArticle()関数は、すべてのDOMアップデートを処理し、hidden属性を追加または削除することにより、各<article></article>要素を表示または非表示にします。ページが読み込まれたら、location.hashまたはページの最初の<article></article>要素に基づいてアクティブ<article></article>要素を決定します：

（JavaScriptコードスニペットはここに埋め込まれている必要があります）

イベントハンドラー関数は、すべてのページのクリックを監視し、ユーザーが#hash：switchArticle()でリンクをクリックしたときに呼び出します。

（JavaScriptコードスニペットはここに埋め込まれている必要があります）

関数をswitchArticle()へのコールバックとして渡すことにより、view transitions api：document.startViewTransition()を使用できます。

（JavaScriptコードスニペットはここに埋め込まれている必要があります）

初期状態のスナップショットをキャプチャし、実行し、新しい状態のスナップショットをキャプチャし、2つの間にデフォルトの半秒フェード効果を作成します。 document.startViewTransition() switchArticle()cssセレクター

および

は、それぞれ古い状態と新しい状態を設定するために使用できます。 ::view-transition-old(root)（CSSコードスニペットはここに埋め込まれている必要があります）::view-transition-new(root)

以上がビュートランジションAPIの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。