【Nuxt.js】transition実践編：ページ遷移アニメーション

前置き

ボタンだけのシンプルなページをほわっと表示。
今回の実践編では、
全てのページ遷移時でアニメーション🤗
これだけでもウキウキしますね🕺
基礎編もご覧ください。

ページ遷移アニメーションを全体化しよう

【ディレクトリ の構造、ファイル名】
ページは下記の順番で遷移します。
index.vue → main.vue → sub.vue

file

assets/
--| scss
-----| common.scss

layouts/
--| default.vue

pages/
--| index.vue
--| main.vue
--| sub.vue

nuxt.config.js // common.scssを読み込ませる

【How to use】
基礎編でのtransitionの使い方を元に、
全てのページでアニメーションを適応するため
デフォルトレイアウトを使用します。
公式 pageTransition プロパティ参照です！
layoutTransitionはlayouts同士での
切り替えに使うので…
(layouts/default.vue → layouts/hogehoge.vue)
今回はpageTransitonのみです！
https://ja.nuxtjs.org/api/configuration-transition/

v2.7.0〜
nuxt.config.jsで
pageTransition記載が不要になりました！
超シンプルで簡単になりましたね🤗
デフォルトのname="layout"で反映させてます。

【layouts/default.vue】
PageTransitionを適応
・transitionタグに
　デフォルトのname="page"を記載
・をtaransitonタグで囲う

layouts/default.vue

<template>
 <div>
   <transition name="page">
     <nuxt />
   </transition>
 </div>
</template>

<style>
</style>

【common.scss】
configで設定したnameを使って
アニメーションを設定するだけです🌟

common.scss

 .page-enter {
   opacity: 0;
 }
 .page-enter-active {
   transition: opacity 2s;
 }

…終わりです😲
ページ遷移アニメーションと、
それを全体化させるだけならこれで終わり！
と〜〜〜っても簡単ですよね🍒
複雑なアニメーションをやるなら
CSSが1番大変ですよね…（ボソボソ）

あとはpagesにページ遷移を書き込みましょう✍️
スタイリングは省きます。
そのため遷移先のみ変えればOKです！

index.vue

<template>
 <div class="container">
   <nuxt-link to="/main">MOVE</nuxt-link>
 </div>
</template>

main.vue

<template>
 <div class="container">
   <nuxt-link to="/sub">MOVE</nuxt-link>
 </div>
</template>

sub.vue

<template>
 <div class="container">
   <nuxt-link to="/">MOVE</nuxt-link>
 </div>
</template>

完成です🎉
意外とシンプルで簡単ですね♪

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab