FrontWorks.dev

【Transition】Nuxt.jsでページ遷移時にアニメーションをつけてみる

投稿日

Nuxtを使ってサイトを作成していてページの遷移時にふわっと切り替わるようなアニメーションをつけたいと思ったことはありませんか？

今回はNuxtのtransitionコンポーネントを使用して、ページ遷移時のアニメーションを追加してみようと思います。

Transition

今回はあくまでサイト内のページ遷移時のアニメーションなのでコンポーネント間の遷移については書いていません。

↓ドキュメントは以下 https://nuxtjs.org/ja/docs/features/transitions/

上記ドキュメントのグローバルな設定の部分を使います。

レイアウトも切り替えるとなるとlayoutTransitionとpageTransitionの両方にスタイルをつけてあげると想定通りの実装になると思います。

layoutTransition

まずはこちらから。

プロパティのデフォルト設定は以下のようになっています。

{
	name: 'layout',
	mode: 'out-in'
}

デフォルトのまま使用するのであれば、以下のようにスタイルをつけます。

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}

このようにすることでレイアウトの切り替え（このサイトの場合TOP→下層ページ）の遷移時にopacityのスタイルが当たります。

デフォルトの設定を変更する場合は、nuxt.config.jsに追記します。

export default {
  layoutTransition: 'my-layouts'
  // もしくは
  layoutTransition: {
    name: 'my-layouts',
    mode: 'out-in'
  }
}

特にクラス名等にこだわりが無ければデフォルトでも問題ないのかなと思いますがこの辺はお好みで…

pageTransition

どちらかといえばこっちの方がよく使うかもしれません。

こちらはpage/にあるファイル間の遷移時にアニメーションを付与します。

基本的には先程と同じですが、デフォルト設定は以下。

{
  name: 'page',
  mode: 'out-in'
}

スタイルは以下のようにつけます。

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

こちらでページ間の遷移時にアニメーションが付与されると思います。

こちらもデフォルト設定を変更する場合はnuxt.config.jsに追記します。

pageTransition: 'my-page'
// または
pageTransition: {
  name: 'my-page',
  mode: 'out-in',
  beforeEnter (el) {
    console.log('Before enter...');
  }
}

まとめ

いかがでしたでしょうか。 とても簡単にページ遷移のアニメーションが付与できたのではないかなと思います。 もっと複雑なアニメーションをつけたりする場合はもう少し処理が必要になるようなのですが、これくらいの小さな処理であればほとんどコストもかからず実装できることがわかりました。 是非参考にしてみてください。

参考

#Vue#Nuxt.js#JavaScript