View Transition API を使用すると、2 つの状態間のアニメーション遷移を生成しながら、1 つのステップで DOM を更新できます。
このような遷移は、私を含むデベロッパーから頻繁にリクエストされていた機能です。デフォルトの優秀さと拡張性とカスタマイズのバランスが取れた形で、この機能をリリースできたと思います。自画自賛のように聞こえるかもしれませんが、この機能の設計にはデベロッパーのフィードバックが不可欠でした。この機能の初期のプロトタイプは柔軟性に欠けていました。プロトタイプを試してフィードバックを送信してくださった皆様（あなたもそうだったかもしれません）のおかげで、この機能は全面的に再考されました。ありがとうございました
この機能の詳細とデモについては、こちらのガイドをご覧ください。ここに記載されていない内容についてご不明な点がございましたら、Twitter、Mastodon、メールでお問い合わせください。
View Transition API は現在 Chrome でのみ使用できますが、段階的な拡張機能として使用できます。このガイドには、ブラウザ間で使用できるヘルパー関数が含まれていますが、アニメーションが表示されるのは、ビュー遷移をサポートしているブラウザのみです。
この機能は、他のブラウザ ベンダーや独立系の協力を得て、CSS ワーキング グループ内で開発されました。他のブラウザがビュー遷移を採用するかどうか、またその時期は不明ですが、Mozilla の標準に関する立場と WebKit の標準に関する立場に注目してください。
ただし、まだ「完了」ではありません。
Chrome 111 でリリースされる機能は、最初のリリースにすぎません。すべてのバグがすでに検出されていることを願っておりますが、見つかった問題は crbug.com に報告してください。できれば、簡素化したデモも添付してください。慣れていない場合は、Twitter、Mastodon、メールでお問い合わせください。
このリリースは、大きな全体像の一部であり、小さいながらも有用なものとなることを願っています。現在出荷しているパーツが将来も互換性を持つように、この機能の拡張をすでに検討しています。
以下に、Google が検討している内容のプレビューを示します。これらの機能は優先順位が付けられていません（ただし、最初の機能は多くのユーザーにとって最も重要かもしれません）。ご自身にとって最も重要な機能について、フィードバックをお寄せください。
ドキュメント間の遷移
デベロッパーの皆様から、次に取り組んでほしい機能として最も要望の多かった機能です。すでに開発を進めており、近日中にリリースされる予定です。
View Transitions API は、同じオリジンのドキュメント間で動作するように設計されています。唯一の違いは、DOM 状態の変化を startViewTransition が通知するのではなく、ナビゲーション自体がその変化を通知することです。
このプロトタイプは chrome://flags/#view-transition-on-navigation フラグで利用できます。非常にシンプルなデモとより複雑なデモをご覧ください。
これを進めるには、各ページが遷移を有効にする方法を把握する必要があります。現在はメタタグ <meta name="view-transition" content="same-origin"> を使用していますが、CSS の方が適していると考えております。また、JavaScript を記述しなくても、遷移元のページの種類を簡単に把握できるようにしたいと考えています。
やるべきことはたくさんあり、Google は「速さ」よりも「正確さ」を重視していますが、この機能は間違いなく優先事項です。
コンポーザで駆動されるアニメーション
カスタマイズがはるかに簡単であるため、デフォルトで遷移グループの幅と高さをアニメーション化することにしました。ただし、アニメーションはメインスレッドで実行されるため、特にページの読み込み中は理想的ではありません。
デフォルトのアニメーションと一般的なカスタマイズを検出し、コンポジタ駆動のアニメーションとして再解釈することで、パフォーマンスを大幅に向上させる予定です。
スコープ指定された遷移
現在、SPA 遷移のスコープはドキュメント全体に設定されており、一度に実行できる遷移は 1 つだけです。複数のページ コンポーネントが独立して遷移を実行できるように、遷移を特定の要素に限定できる機能を導入する予定です。
これにより、埋め込み動画プレーヤーでビューの遷移を埋め込みチャット ウィジェットと同時に使用できるようになります。
ネストされた遷移グループ
現在、すべての ::view-transition-group は兄弟です。多くの場合、これは良いことです。ビューをコンテナ間で遷移させることができ、クリッピングを気にする必要がないためです。
ただし、ビューを親によってクリップしたい場合もあります。この親は遷移にも関与する場合があります。
特定の ::view-transition-group を別の ::view-transition-group 内に配置するオプトインについて調査します。
遷移のクラス
各 view-transition-name は一意でなければなりません。そのため、特定の要素が文字通り同じ要素でなくても、DOM の変更の両側で概念的に「同じ」要素であることを特定できます。
ただし、view-transition-name が異なるオブジェクトでも、同じ種類のアニメーションを使用する必要がある場合があります。現時点では、view-transition-name ごとにセレクタ ルールを追加する必要があります。
この制限を克服するため、遷移のクラスを作成する方法を追加する予定です。
オフスクリーン要素を無視する
要素に view-transition-name を指定すると、その要素は独自のグループとして遷移に含まれます。最適な方法とは限りません。たとえば、ヘッダーに view-transition-name を指定して、2,000 ピクセル下にスクロールした状態からページ上部の状態に移動すると、ヘッダーは 2,000 ピクセル離れたところからアニメーション化するため、タイミングが不適切に感じられます。
代わりに、ビューポートの外側にある要素は、view-transition-name がないかのように無視されるようにオプトイン機能を追加する予定です。
これは、style.viewTransitionName を動的に設定することで JavaScript ですでに行えますが、宣言型のソリューションが必要なように思えます。
requestAnimationFrame 駆動のアニメーション
web animations API を使用して JavaScript でビュー遷移アニメーションを作成することはすでに可能ですが、requestAnimationFrame を使用してフレーム単位で処理する必要がある場合もあります。
すでに可能ですが、少しハックっぽい方法です。役立つヘルパーをいくつか示したデモをご覧ください。ハッキングではなく、
この作業は 2 つの部分に分かれています。1 つは、アニメーションが完了したタイミングを示す API を提供する方法です。2 つ目は、JavaScript による疑似要素へのアクセスを可能にすることです。2 つ目の作業はかなり大掛かりなものになる可能性がありますが、長期的には正しい選択であると思われます。
ぜひ、素晴らしいビュー遷移を作成してください。
私と同じように、この機能の現在と未来にご期待いただければ幸いです。ご意見やご感想、作成したビュー遷移（スムーズで機能的なものから、単純でばかげたものまで）をお知らせいただくには、Twitter または Mastodon からお気軽にお問い合わせください。