こういうやつやります。
スタイル
共通スタイルの設置
公式：https://ja.nuxtjs.org/api/configuration-css/
nuxt.config.jsにファイルを追加。
nuxt.config.js
css:[{src:'~/assets/styles/transition.scss',lang:'scss'},],スタイル例
公式：https://ja.nuxtjs.org/api/pages-transition/
ゆくページと来るページの遷移前・中・後スタイルをそれぞれ指定。今回は「戻る」「進む」の2パターンあるので2*3*2=12のクラスが必要です。
コメント部分は今回不要ですが、混乱しがちなので補助として書いています。
transition.scss
.next-enter-active,.next-leave-active,.prev-enter-active,.prev-leave-active{position:absolute;transition:all.3s;}.next-enter{transform:translateX(100vw);}.next-enter-to{// transform: translateX(0);}.next-leave{// transform: translateX(0);}.next-leave-to{transform:translateX(-50vw)scaleX(0.5);filter:brightness(0.5);}.prev-enter{transform:translateX(-50vw)scaleX(0.5);filter:brightness(0.5);}.prev-enter-to{// transform: translateX(0);}.prev-leave{// transform: translateX(0);z-index:1;}.prev-leave-to{z-index:1;transform:translateX(100vw);}コンポーネント毎にアニメーションを設定
アニメーションを適用したい各コンポーネントにtransitionを指定。
exportdefault{transition(to,from){// [1] 遷移元の階層によってページめくり方向を指定if(from&&to.path.startsWith(from.path)){// [2] オブジェクトで設定するreturn{name:'next',mode:'',}}else{return{name:'prev',mode:'',}}},}[1] 遷移元の階層によってページめくり方向を指定する
transition設定には関数が利用できます。
引数からパスがとれるので比較し、より深い階層からの遷移のみ「戻る」アニメーションになるようにしました。
[2] オブジェクトで設定する
設定オブジェクトを返してトランジション設定を行います。今回はnameとmodeを指定します。
- nameはトランジションの名前。
- これが接頭辞となってページにクラスが適用されます。
- modeはトランジションのモード。
- デフォルトでは
out-in、つまりゆくページの消滅と来るページの出現が順番にアニメーションします。 今回は同時に動かしたいので、空文字を返します。これはそういうルールです。
- デフォルトでは
※補足：ページ遷移アニメーションは、遷移 先のコンポーネントの設定が参照されます。遷移 元ページの消えるアニメーションも、遷移 先の設定を参照します。
終わり
僕からは以上です。
え、本当に終わりか、ですって？本当ですよ！Nuxt.jsはすごいですね。
