Zenn
📘

【Nuxt】ページ遷移時にアニメーションをつける機能なんかあったんだ

2024/03/10に公開
Nuxt
Vue.js
tech

はじめに

nuxt の公式ドキュメントを漁ってたら transitions なるページを発見したのでちょっと触ってみた
ページ遷移時にアニメーションをつける機能でライブラリとかは特に必要ない

使い方

まずは config に追記

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  },
})

次に app.js を編集
style の中にページ遷移時の css を追記する

app.vue
<template>
  <NuxtPage />
</template>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>

あとは NuxtLink でページ遷移する際に勝手にアニメーションが付く

index.vue
<template>
  <div>
    <h1>Home page</h1>
    <!-- aタグでは遷移時にアニメーションがつかないので注意 -->
    <NuxtLink to="/about">About page</NuxtLink>
  </div>
</template>
  • DEMO

layout 切り替え時にもアニメーションをつけられる

nuxt.config.ts
export default defineNuxtConfig({
  app: {
    layoutTransition: { name: 'layout', mode: 'out-in' }
  },
})

layout を 2 種類用意して

app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>

さっきみたく遷移するとこうなる
指定した通り一瞬 grey になってるのが分かる

  • DEMO

あとは自分次第でグルグルさせたりいろんなことができる

  • DEMO

まとめ

使うタイミングはあるっちゃあるかもしれないけど頻度は低そう
ブログ的な物を作るときにさっと組み込めばいいかも知れない
autoanimate なんかと組み合わせると労力をかけずになんか動きのあるプロジェクトができていいかもね
https://zenn.dev/rlab/articles/8a4621fc2d87b0

Discussion