[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする (original) (raw)

2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。

View Transitions APIとは

View Transitions APIは、画面遷移をなめらかに行うことができる機能です。

この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。

まずはView Transitions APIの特徴から紹介したいと思います。

特徴1：異なるDOM要素間でアニメーションできる

アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。

例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。

特徴2：アニメーションがCSSで自由自在

アニメーションはCSSでカスタマイズすることも可能です。
デフォルトではクロスフェードのアニメーションが適用されます。

例えばページ遷移時に新しいページが左や右から出てくるというエフェクトや、古いページを縮小しつつフェードアウトさせるといった表現もできます。

View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術という記事では具体的な実装例が掲載されており、デモサイトもあるので、ぜひ触って試してみてください。

特徴3：別ページへの遷移でもアニメーションできる

従来のCSSアニメーションでは同一ページ内の要素をアニメーションすることしかできませんでした。
また、View Transitions APIについても、これまで実装されていたのは同一ページ内のアニメーションのみでした。

しかし、2024年6月11日リリースのChrome126から、別ページへの遷移でもView Transitions APIを使うことができるようになりました！

この機能を使うと、従来SPA(Single-Page-Application)でしか表現できなかったリッチなアニメーションが、MPA(Multi-Page-Application)で構築されているWebサイトでも利用することができます！

（※ただし同一オリジンのサイト間の遷移のみ）

本記事では、Chrome126から導入される、別ページへの遷移の際にアニメーションを行う機能について解説したいと思います。

本記事公開時点では、まだChrome126はリリースされておりませんのでご注意ください。

別ページへの遷移でView Transitions APIを使う方法

1. View Transitions APIの有効化

以下のCSSを記述するだけです。

@view-transition {
  navigation: auto;
}

View Transitions APIを有効化したいページにこのCSSを書くだけで、ページ遷移時にフェードイン・フェードアウトするアニメーションが自動的に適用されます。

以下の例では、ページ遷移の際に、古いページのコンテンツがフェードアウトしつつ、新しいページがフェードインしてくるようになっているのがわかるかと思います。

2. 要素同士のアニメーション

上記の例ではページ全体に対してフェードイン・フェードアウトのアニメーションが適用されました。
それに加えて、特定の要素にアニメーションを付けるにはCSSのview-transition-nameを使います。

遷移前のページに適用するCSS

@view-transition {
  navigation: auto;
}
#article-link { /* アニメーションを付けたい要素 */
  /* ページ遷移の前後で同じview-transition-nameの要素同士がアニメーションされる */
  view-transition-name: article;
}

遷移後のページに適用するCSS

@view-transition {
  navigation: auto;
}
#article-detail { /* アニメーションを付けたい要素 */
  /* ページ遷移の前後で同じview-transition-nameの要素同士がアニメーションされる */
  view-transition-name: article;
}

下の動画のように、共通のview-transition-nameを持つ要素同士がアニメーションされます。

1つのページ内でview-transition-nameを重複させることはできません。
逆に言うと、サーバーサイドの処理やJavaScriptの処理をうまく使ってview-transition-nameを一意になるように割り振る必要があります。
例えば記事リストから記事詳細ページへのリンクの場合、記事リストページでは記事ごとに一意なview-transition-nameを指定する必要があります。

JSで処理する場合

JavaScriptで実現するためにはpageswapイベントとpagerevealイベントを使います。
これらのイベントは、ページ遷移の前後に発生します。そのタイミングで動的にview-transition-nameを付与する方法が、Chromeの開発者サイトで解説されています。

https://developer.chrome.com/docs/web-platform/view-transitions/cross-document?hl=ja

サーバーサイドで処理する場合

サーバーサイドで一意なview-transition-nameを割り振る場合は、以下のようにview-transition-nameに一意なIDを含めてしまえば良さそうです。

サーバーサイドの実装イメージ(PHP)

<?php foreach ($articles as $article) { ?>
    <a
      class="article-link"
      style="view-transition-name: article-<?php echo $article.id ?>"
    >
      <img src="...">
      記事の詳細はこちら
    </a>
<?php } ?>

また、CSS変数などを活用することもできそうです。

3. さまざまなエフェクトをかける

デフォルトではフェードイン・フェードアウトのアニメーションになりますが、これを変更することも可能です。

アニメーションを適用するには、::view-transition-{old,new}を使ってanimationプロパティにCSSアニメーションを指定します。

こちらですがMDNの例が分かりやすかったので引用したいと思います。
（コメント部分は筆者の追記です。）

MDNより引用

/* https://developer.mozilla.org/ja/docs/Web/CSS/::view-transition-old より引用 */

/* アニメーションを定義 */
@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

 /* アニメーションを定義 */
@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* 遷移元ページのアニメーション */
::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x; /* ここに適用したいアニメーションの名前を指定 */
}

/* 遷移後ページのアニメーション */
::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x; /* ここに適用したいアニメーションの名前を指定 */
}

また、上で紹介した以外にも、Chromeの開発者サイトではさまざまなアニメーションが例示されているので、本記事でもその一部を引用して紹介したいと思います。（コメント部分は筆者の追記です。）

/* https://developer.chrome.com/docs/web-platform/view-transitions/cross-document?hl=ja より引用 */

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes scale-up {
  from {
    scale: 0;
  }
}

@keyframes scale-down {
  to {
    scale: 0;
  }
}


/* 縮小しながらフェードアウト */
@keyframes shrink {
  to {
    scale: 0.8;
    opacity: 0.5;
  }
}

/* 拡大しながらフェードイン */
@keyframes grow {
  from {
    scale: 0.8;
    opacity: 0.5;
  }
}

アニメーションがしっくりこない時のTips

上で紹介したようにCSSアニメーションを適用するだけで充分リッチなUIになりますが、アニメーションしている要素によっては微妙なサイズのずれが気になったりすることがあります。

そういう時はView transitions: Handling aspect ratio changesというブログ記事で解説されているテクニックを使うと良さそうです。
以下、当該記事内で紹介されているコードをいくつか引用したいと思います。

例えば、テキスト同士のアニメーションで、微妙な文字のずれが生じている場合、width: fit-contentを使って解決する方法が紹介されています。

/* https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/ より引用 */
#view-transition-target {
  view-transition-name: simple-text;
  width: fit-content;
}

また、アニメーション前後で要素のアスペクト比が変わるとアニメーションがうまくいかない問題については、::view-transition-{old,new}にheight: 100%などをかけておくといいようです。

/* https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/ より引用 */
::view-transition-old(text),
::view-transition-new(text) {
  /* Break aspect ratio at an element level */
  height: 100%;
  /* But maintain it within the image itself */
  object-fit: none;
  /* And hide parts of the image that go out of bounds */
  overflow: clip;
}

他のTipsについても紹介したブログ記事内に掲載されているので、ぜひ参考にしてみてください！

まとめ

本記事ではChrome 126から導入される、MPA向けView Transitions APIについて紹介しました。

この機能を使うと、従来難しかったDOM要素が変更される時のアニメーションや、ページ遷移時のアニメーションを実現することができます。

また、CSSで実装する機能なので、非対応ブラウザでは通常のページ遷移を行いつつ、対応ブラウザへはリッチなUIを提供することができるというのも嬉しいポイントですね！

まだ新しい機能ということで日本語情報も少ないですが、まるでスマホアプリを使っているようなUIをWebでも提供できるということで、これから積極的に使っていきたいです！