MPAで View Transition APIによるスムーズな遷移のサンプル

MPAでの View Transition API
- MPA (Multi-Page-Application) で構築されているWebサイトで View Transition API を利用 - 2024/06/04 現在、Chromeのみ対応 (Chrome 126以降) - 利用可能なのは、同一オリジンのサイト間の遷移のみ - MPAのページ遷移で View Transitions API を有効化するには、CSSで `@view-transition { navigation: auto; }` を記載するのみ - 特定の要素にCSSで `view-transition-name` を指定すると、ページ遷移の前後で同じ `view-transition-name` の要素同士がアニメーションされる - 1つのページ内で `view-transition-name` の値を重複させることはできず、ページ内で一意になる必要あり - JavaScriptで実現するためには、 `pageswap` イベントと `pagereveal` イベントを使う - PHP等のサーバーサイドで `view-transition-name` の値を割り振る場合、 `style="view-transition-name: article-"` のようなstyle属性指定を使う

デモ
- [サンプルA](/js-tips/view-transition-api/mpa/sample-a.html) - [サンプルB](/js-tips/view-transition-api/mpa/sample-b.html) - [サンプルC](/js-tips/view-transition-api/mpa/sample-c.html)

コード

CSS

 
/* View Transitions APIの有効化 */
@view-transition {
  navigation: auto;
}

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

HTML | サンプルA

 
<img src="sample.jpg" width="160" height="160" alt="" id="sample_image01" />

HTML | サンプルB

 
<img src="sample.jpg" width="320" height="320" alt="" id="sample_image01" />

HTML | サンプルC

 
<img src="sample.jpg" width="640" height="640" alt="" id="sample_image01" />

参照