everything-claude-code/docs/ja-JP/skills/angular-developer/references/route-animations.md

ルートトランジションアニメーション

Angular ルーターは、ルート間のスムーズなビジュアルトランジションのためにブラウザの View Transitions API をサポートしています。

ビュートランジションの有効化

ルーター設定に withViewTransitions() を追加します。

provideRouter(routes, withViewTransitions());

これはプログレッシブエンハンスメントです。API をサポートしていないブラウザでも、ルーターは引き続き動作しますが、トランジションアニメーションは行われません。

仕組み

1. ブラウザが古い状態のスクリーンショットを撮ります。
2. ルーターが DOM を更新します（新しいコンポーネントをアクティベートします）。
3. ブラウザが新しい状態のスクリーンショットを撮ります。
4. ブラウザが2つの状態の間をアニメーションします。

CSS によるカスタマイズ

トランジションはグローバル CSS ファイルでカスタマイズします（コンポーネントスコープの CSS ではありません）。

::view-transition-old() と ::view-transition-new() 疑似要素を使用します。

/* 例：クロスフェード + スライド */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in;
}

高度な制御

onViewTransitionCreated を使用して、ナビゲーションコンテキストに基づいてトランジションをスキップしたり、動作をカスタマイズしたりします。

withViewTransitions({
  onViewTransitionCreated: ({transition, from, to}) => {
    // 特定のルートに対してアニメーションをスキップ
    if (to.url === '/no-animation') {
      transition.skipTransition();
    }
  },
});

ベストプラクティス

• グローバルスタイル：ビューカプセル化の問題を避けるため、トランジションアニメーションは常に styles.css で定義してください。
• ビュートランジション名：ルートをまたいでスムーズにトランジションさせたい要素（ヘッダー画像など）には、一意の view-transition-name を割り当ててください。