💡

Nuxt3でView Transition APIをつかう簡単な解説

2024/01/10に公開

Nuxt

frontend

Nuxt 3

tech

はじめに

View Transition API をご存知でしょうか？

sample

このように異なる DOM 状態間のアニメーション遷移を簡単に作成するができる Web API です。

本記事では、View Transition API を使用してシームレスな画面遷移を実装するまでをまとめました。

「View Transition API とは、どのような技術なのか？」のような詳細な解説はありませんので他記事をあたってください。

本記事の対象者

Nuxt3 で View Transition API を使ってシームレスな画面遷移を実装したい方
すぐに動くものを実装したい方

バージョン

"nuxt": "^3.9.0"

かんたんなサンプル

さっそく実装についてですが、本記事では下の GIF のような画面遷移のサンプルを実装します。

sample

ソースコード

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ......
  // viewTransitionをtrueにする
  experimental: {
    viewTransition: true,
  },
  // ......
})

遷移元ページ

pages/index.vue

<template>
  <div class="p-4">
    <h1 class="text-3xl font-bold">TOP</h1>
    <NuxtLink to="/about" class="inline-block">
      <!-- トランジションする要素 -->
      <img
        src="画像パス"
        class="image-1"
        width="560"
        height="315"
        alt="画像1"
      />
    </NuxtLink>
  </div>
</template>

<style scoped>
.image-1 {
  view-transition-name: image-1;
}
</style>

遷移先ページ

pages/about.vue

<template>
  <div class="p-4">
    <h1 class="text-3xl font-bold">About</h1>
    <!-- トランジションする要素 -->
    <img
      src="画像パス"
      class="image-1 h-full w-full"
      width="560"
      height="315"
      alt="画像1"
    />
  </div>
</template>

<style scoped>
.image-1 {
  view-transition-name: image-1;
}
</style>

かんたんな解説

view-transition-name: <任意の名前>; をトランジションさせたい要素それぞれに同じ名前で指定します。
nuxt.configでも viewTransition: true の設定をするとシームレスな画面遷移を実装できます。

view-transition-name は一意の名前でないと正しくトランジションしないので、ブログなど複数コンテンツがあるページでは一意の slug などを用意して view-transition-name をつけると良いと思いました。

View Transition API の詳しい説明はこちらの記事がわかりやすいです。

https://ics.media/entry/230510/

view-transition-name は、まだ対応していないブラウザがあるので確認の上使用することをお勧めします。

対応ブラウザ

一応 GitHub でも今回のサンプルのリポジトリを公開しています。

さいごに

本記事では、Nuxt3 で View Transition API を使用した画面遷移のかんたんな解説を行いました。
まだ、あまり記事としてまとまっているものが少なく「存在は知っているけど使うのは難しそうだな」と感じていましたが、実際に使ってみると思ったよりかんたんに実装できたので共有できてよかったです。

参考文献