【Nuxt.js】iOSっぽい画面遷移をする

こういうやつやります。

スタイル

共通スタイルの設置

公式：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パターンあるので232=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を指定。

export default {
  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はすごいですね。