ルート遷移アニメーション

ルート遷移アニメーションは、Angularアプリケーション内の異なるビュー間を移動する際にスムーズな視覚的遷移を提供することで、ユーザー体験を向上させます。Angular Routerは、ブラウザのView Transitions APIの組み込みサポートを含んでおり、サポートされているブラウザでルート変更間のシームレスなアニメーションを可能にします。

HELPFUL: RouterのネイティブView Transitions統合は現在デベロッパープレビュー中です。ネイティブView Transitionsは比較的新しいブラウザ機能であり、すべてのブラウザでのサポートは限られています。

Viewトランジションの仕組み

Viewトランジションは、ブラウザのネイティブなdocument.startViewTransition APIを使用して、アプリケーションの異なる状態間でスムーズなアニメーションを作成します。このAPIは以下の手順で動作します。

現在の状態をキャプチャする - ブラウザが現在のページのスクリーンショットを撮ります
DOMを更新する - コールバック関数が実行され、DOMを更新します
新しい状態をキャプチャする - ブラウザが更新されたページの状態をキャプチャします
トランジションを再生する - ブラウザが古い状態と新しい状態の間をアニメーションします

以下に、startViewTransition APIの基本的な構造を示します。

document.startViewTransition(async () => {  await updateTheDOMSomehow();});

ブラウザAPIの詳細については、Chrome Explainerを参照してください。

Routerがビュー遷移をどのように使用するか

Angular Routerは、シームレスなルート変更を作成するために、ナビゲーションライフサイクルにビュー遷移を統合します。ナビゲーション中、Routerは以下を行います。

ナビゲーションの準備を完了する - ルートのマッチング、遅延ロード、ガード、およびリゾルバーが実行されます
ビュー遷移を開始する - ルートがアクティベーションの準備ができたときに、RouterはstartViewTransitionを呼び出します
DOMを更新する - Routerは、遷移コールバック内で新しいルートをアクティブ化し、古いルートを非アクティブ化します
遷移を完了する - Angularがレンダリングを完了すると、遷移Promiseが解決されます

Routerのビュー遷移統合はプログレッシブエンハンスメントとして機能します。ブラウザがView Transitions APIをサポートしていない場合、Routerはアニメーションなしで通常のDOMを更新し、アプリケーションがすべてのブラウザで動作することを保証します。

ルーターでのビュー遷移の有効化

ビュー遷移を有効にするには、withViewTransitions機能をルーター設定に追加します。Angularは、スタンドアロンとNgModuleの両方のブートストラップアプローチをサポートしています。

スタンドアロンブートストラップ

import { bootstrapApplication } from '@angular/platform-browser';import { provideRouter, withViewTransitions } from '@angular/router';import { routes } from './app.routes';bootstrapApplication(MyApp, {  providers: [    provideRouter(routes, withViewTransitions()),  ]});

NgModuleブートストラップ

import { NgModule } from '@angular/core';import { RouterModule } from '@angular/router';@NgModule({  imports: [RouterModule.forRoot(routes, {enableViewTransitions: true})]})export class AppRouting {}

StackBlitzで「count」の例を試す

この例は、カウンターの更新に対して、ルーターナビゲーションが直接のstartViewTransition呼び出しを置き換えることができる方法を示しています。

CSSでトランジションをカスタマイズする

CSSを使用してビューのトランジションをカスタマイズし、独自のアニメーション効果を作成できます。ブラウザは、CSSセレクターでターゲットできる個別のトランジション要素を作成します。

カスタムトランジションを作成するには：

view-transition-nameを追加する - アニメーション化したい要素に一意の名前を割り当てる
グローバルアニメーションを定義する - グローバルスタイルでCSSアニメーションを作成する
トランジション擬似要素をターゲットにする - ::view-transition-old()および::view-transition-new()セレクターを使用する

カウンター要素に回転効果を追加する例を次に示します。

/* Define keyframe animations */@keyframes rotate-out {  to {    transform: rotate(90deg);  }}@keyframes rotate-in {  from {    transform: rotate(-90deg);  }}/* Target view transition pseudo-elements */::view-transition-old(count),::view-transition-new(count) {  animation-duration: 200ms;  animation-name: -ua-view-transition-fade-in, rotate-in;}::view-transition-old(count) {  animation-name: -ua-view-transition-fade-out, rotate-out;}

IMPORTANT: ビューのトランジションアニメーションは、コンポーネントスタイルではなく、グローバルスタイルファイルで定義してください。Angularのビューカプセル化はコンポーネントスタイルをスコープするため、トランジション擬似要素を正しくターゲットできなくなります。

StackBlitzで更新された「count」の例を試す

onViewTransitionCreatedによる高度なトランジション制御

withViewTransitions機能は、ビュー遷移を高度に制御するためのonViewTransitionCreatedコールバックを含むオプションオブジェクトを受け入れます。このコールバックは次のとおりです。

インジェクションコンテキストで実行されます
以下を含むViewTransitionInfoオブジェクトを受け取ります。
- startViewTransitionからのViewTransitionインスタンス
- ナビゲート元のルートに対する ActivatedRouteSnapshot
- ナビゲート先のルートに対する ActivatedRouteSnapshot

このコールバックを使用して、ナビゲーションコンテキストに基づいてトランジション動作をカスタマイズできます。たとえば、特定のナビゲーションタイプではトランジションをスキップできます。

import { inject } from '@angular/core';import { Router, withViewTransitions } from '@angular/router';withViewTransitions({  onViewTransitionCreated: ({transition}) => {    const router = inject(Router);    const targetUrl = router.getCurrentNavigation()!.finalUrl!;    // Skip transition if only fragment or query params change    const config = {      paths: 'exact',      matrixParams: 'exact',      fragment: 'ignored',      queryParams: 'ignored',    };    if (router.isActive(targetUrl, config)) {      transition.skipTransition();    }  },})

この例では、ナビゲーションがURLフラグメントまたはクエリパラメータのみを変更する場合（同じページ内のアンカーリンクなど）にビュー遷移をスキップします。skipTransition()メソッドは、ナビゲーションの完了を許可しながらアニメーションを防止します。

Chrome ExplainerのAngularへの適応例

以下の例は、ChromeチームのドキュメントからAngular Routerで使用するために適応された、さまざまなビュー遷移テクニックを示しています。

遷移する要素は同じDOM要素である必要はない

要素は、同じview-transition-nameを共有している限り、異なるDOM要素間をスムーズに遷移できます。

カスタムエントリー/イグジットアニメーション

ルート遷移中にビューポートに出入りする要素に対して、ユニークなアニメーションを作成します。

非同期DOM更新とコンテンツの待機

Angular Routerは、追加コンテンツの読み込みを待つよりも、即時遷移を優先します。

Chrome Explainer

NOTE: Angular Routerはビュー遷移を遅延させる方法を提供していません。この設計上の選択により、追加コンテンツを待っている間にページが非インタラクティブになるのを防ぎます。Chromeのドキュメントが指摘するように、「この間、ページはフリーズするため、ここでの遅延は最小限に抑えるべきです…場合によっては、遅延を完全に避け、すでに持っているコンテンツを使用する方が良いでしょう。」