ビュートランシジョン

Inertia は View Transitions API をサポートしており、ページ遷移をアニメーション化できます。

View Transitions API は比較的新しいブラウザ機能です。Inertia は、この API をサポートしていないブラウザでは標準のページ遷移にフォールバックします。

遷移を有効にする

viewTransition オプションを true に設定することで、訪問時にビュートランシジョンを有効にできます。デフォルトでは、ページ間にクロスフェードの遷移が適用されます。

遷移コールバック

viewTransition オプションにはコールバックを渡すこともでき、そのコールバックはブラウザから提供される標準の ViewTransition インスタンスを受け取ります。これにより、API が提供するさまざまな Promise にフックできます。

リンク

viewTransition オプションは Link コンポーネントでも利用できます。

ViewTransition インスタンスにアクセスするためのコールバックを渡すこともできます。

グローバル設定

Inertia アプリを初期化する際に visitOptions コールバックを設定することで、すべての訪問に対してグローバルにビュートランシジョンを有効にできます。

遷移のカスタマイズ

CSS を使用して遷移アニメーションをカスタマイズできます。View Transitions API は、カスタムアニメーションを作成するために CSS で指定できる複数の疑似要素を使用します。以下の例は、Chrome のドキュメント から引用したものです。

@keyframes fade-in {
    from { opacity: 0; }
}
@keyframes fade-out {
    to { opacity: 0; }
}
@keyframes slide-from-right {
    from { transform: translateX(30px); }
}
@keyframes slide-to-left {
    to { transform: translateX(-30px); }
}
::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

また、各要素に一意の view-transition-name を割り当てることで、ページ間で個別の要素をアニメーションさせることもできます。たとえば、プロフィールページでは大きく、ダッシュボードでは小さく表示されるアバターをアニメーションさせることができます。

任意の CSS アニメーションを使用して、ビュートランシジョンを自由にカスタマイズできます。詳しくは、View Transitions API のドキュメント を参照してください。