page-transitions

ページ遷移アニメーション

ページの変更、ビューの遷移、ナビゲーションのパターンに、ディズニーのアニメーション12原則を適用します。

クイックリファレンス

原則	ページ遷移での実装
スカッシュ＆ストレッチ	ページ表示時の弾力効果
アンティシペーション	表示前の退出アニメーション
ステージング	ビュー間をつなぐヒーロー要素
ストレート・アヘッド／ポーズ・トゥ・ポーズ	共有要素とクロスフェード
フォロースルー／オーバーラッピング	ナビゲーション後にコンテンツが落ち着く
スローイン／スローアウト	表示と退出で異なるイージング
アーク	カーブを使ったスライド遷移
セカンダリーアクション	背景やナビゲーション状態の変化
タイミング	遷移全体で200〜500ms
誇張	強調したい場面に限定
ソリッド・ドローイング	一貫した空間モデル
アピール	滑らかで方向性のわかるナビゲーション

原則の適用

スカッシュ＆ストレッチ：表示されるページに、控えめな弾力のある落ち着きを加えられます。モーダルシートは完全に開く際にわずかに弾みます。プル操作でナビゲーションする場合は、実行前に伸びる動きを加えます。

アンティシペーション：新しいページが表示される前に、現在のページの退出を開始します。わずかなフェードや拡大・縮小で変化を予告します。ページが切り替わる前にナビゲーションインジケーターを更新します。

ステージング：共有要素やヒーロー要素を維持し、ビュー間のつながりを保ちます。ナビゲーションやフッターなどの共通要素は安定させます。新しいコンテンツ領域に遷移の焦点を当てます。

ストレート・アヘッドとポーズ・トゥ・ポーズ：共有要素の遷移では、要素を連続的に変形させます（ストレート・アヘッド）。クロスフェードでは、個別の状態を切り替えます（ポーズ・トゥ・ポーズ）。コンテンツ同士の関係に応じて使い分けます。

フォロースルーとオーバーラッピング：初期位置から移動した後にページのコンテンツを落ち着かせます。ヘッダー、本文、フッターの順にコンテンツを段階的に表示します。コンテナの表示後に、画像を控えめなフェードで読み込みます。

スローイン／スローアウト：退出ではイーズイン（加速して離れる）を使います。表示ではイーズアウト（減速しながら入る）を使います。共有要素ではイーズイン・イーズアウトを組み合わせます。直線的な動きは使わないでください。不自然に感じられます。

アーク：スライド遷移にわずかなカーブを加えられます。階層型のナビゲーションでは、Z軸方向の奥行きを表現します。円形のリビールでは、トリガー位置から広がるように表示します。

セカンダリーアクション：遷移中にヘッダーのタイトルを更新します。下部ナビゲーションのインジケーターを移動させます。背景色を変化させます。遷移に合わせてスクロール位置をリセットします。

タイミング：短い遷移は200〜300ms、標準は300〜400ms、複雑な遷移は400〜500msです。モーダルやシートは250〜350msです。戻るナビゲーションは、進む場合より速くすることがよくあります。

誇張：オンボーディングや達成時など、重要な場面で誇張を使います。通常のナビゲーションは芝居がかったものではなく、滑らかにします。ユーザーは頻繁にナビゲーションします。

ソリッド・ドローイング：一貫した空間のメタファーを保ちます。ページを重ねる場合は、Z順序を維持します。ページをスライドさせる場合は、方向を一貫させます。ユーザーは遷移を通じてメンタルモデルを形成します。

アピール：遷移は印象的であることより、役に立つことを重視します。速く、滑らかで、方向がわかりやすい動きにします。ユーザーが、どこから来てどこへ移動したのか理解できるようにします。

遷移パターン

クロスフェード（デフォルト）

.page-exit {
    opacity: 1;
}
.page-exit-active {
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.page-enter {
    opacity: 0;
}
.page-enter-active {
    opacity: 1;
    transition: opacity 200ms ease-out;
}

スライド（階層型）

/* Forward navigation */
.page-enter {
    transform: translateX(100%);
}
.page-enter-active {
    transform: translateX(0);
    transition: transform 300ms ease-out;
}
.page-exit-active {
    transform: translateX(-30%);
    transition: transform 300ms ease-in;
}

/* Back navigation - reversed */
.page-enter {
    transform: translateX(-30%);
}
.page-exit-active {
    transform: translateX(100%);
}

共有要素（ヒーロー）

// View Transitions API
document.startViewTransition(() => {
    updateDOM();
});

// CSS for specific element
.hero-image {
    view-transition-name: hero;
}
::view-transition-old(hero),
::view-transition-new(hero) {
    animation-duration: 300ms;
}

タイミングの目安

遷移タイプ	所要時間	退出	表示
クロスフェード	200〜300ms	ease-in	ease-out
前方へのスライド	300〜400ms	ease-in	ease-out
戻るスライド	250〜350ms	ease-in	ease-out
モーダルを開く	250〜350ms	—	ease-out
モーダルを閉じる	200〜300ms	ease-in	—
共有要素	300〜400ms	n/a	ease-in-out
タブ切り替え	150〜200ms	即時	ease-out

ナビゲーションのパターン

パターン	遷移	方向
詳細への移動（一覧→詳細）	左スライド／共有要素	右＝進む
タブバー	フェード／スライド	水平方向
ボトムシート	上方向へのスライド	垂直方向
モーダル	拡大・縮小＋フェード	Z軸
戻るボタン	進む場合の逆	左＝戻る

パフォーマンス

1. transform と opacity のみを使用します
2. ハードウェアアクセラレーション：will-change: transform
3. モーションを減らす設定：即時遷移
4. 低速なデバイスでテストし、遷移で操作を妨げないようにします
5. View Transitions API：ネイティブのパフォーマンス