左右スライドのページトランジション

スライドトランジションの構造

スライドトランジションは、スナップショット擬似要素に対する2つの協調アニメーションです。old スナップショットが外へ移動し、new スナップショットが反対側から入ってきます。

.page {
  view-transition-name: page;
}
@keyframes slide-out-left {
  to { transform: translateX(-30%); opacity: 0; }
}
@keyframes slide-in-right {
  from { transform: translateX(30%); opacity: 0; }
}
::view-transition-old(page) {
  animation: 400ms ease-out both slide-out-left;
}
::view-transition-new(page) {
  animation: 400ms ease-out both slide-in-right;
}

なぜ 100% ではなく 30% に動かすのか

完全に画面外（100%）まで動かすと、iOS／Android のネイティブナビゲーションと競合する硬い「カード差し替え」感が出ます。±30% までの部分的な translate に opacity フェードを組み合わせることで、より柔らかいトランジションになり、Vercel ダッシュボードや Linear のイシューナビゲーションのようなモダンWebアプリに近い手触りになります。

戻るナビゲーションでの方向反転

戻るボタンでは反対方向にスライドさせたいでしょう。ルーター側のナビゲーション方向をトラッキングし、条件に応じて別アニメーションを適用します:

const direction = back ? 'back' : 'forward';
document.documentElement.dataset.navDirection = direction;

[data-nav-direction="back"] ::view-transition-old(page) {
  animation-name: slide-out-right;
}

このパターンは CSS を宣言的に保ち、ロジック（方向）はデータ属性1つに集約します。