page transition プロパティ

Nuxt では <transition> コンポーネントを使って、ページ間を遷移する際のトランジション/アニメーションの作成することができます。

• 型: String または Object または Function

特定のルートに対してカスタムトランジションを設定するには、ページコンポーネントに transition キーを追加してください。

export default {
  // 文字列を指定できます
  transition: ''
  // またはオブジェクト
  transition: {}
  // または関数
  transition (to, from) {}
}

文字列

もし transition キーが文字列で設定された場合は transition.name として用いられます。

export default {
  transition: 'test'
}

Nuxt はこれらの設定を使ってコンポーネントを以下のように設定します：

<transition name="test"></transition>

オブジェクト

もし transition キーがオブジェクトで設定された場合：

export default {
  transition: {
    name: 'test',
    mode: 'out-in'
  }
}

Nuxt はこれらの設定を使ってコンポーネントを以下のように設定します：

<transition name="test" mode="out-in"></transition>

transition オブジェクトが持てるプロパティは以下の通りです：

page transition プロパティでメソッドを定義することもできます。これらは JavaScript フック用 です：

• beforeEnter(el)
• enter(el, done)
• afterEnter(el)
• enterCancelled(el)
• beforeLeave(el)
• leave(el, done)
• afterLeave(el)
• leaveCancelled(el)

export default {
  transition: {
    afterLeave(el) {
      console.log('afterLeave', el)
    }
  }
}

注意: JavaScript のみのトランジションに css: false を明示的に追加して Vue が CSS の検出をスキップできるようにすることもいい考えです。これにより CSS ルールが誤ってトランジションに干渉するのを防ぎます。

トランジションモード

ページ用のデフォルトのトランジションモードは Vue.js のデフォルトモードとは異なります。 transition モードはデフォルトで out-in が設定されます。もしトランジションの開始と終了を同時に実行したい場合モードを空文字 mode: '' に設定する必要があります。

export default {
  transition: {
    name: 'test',
    mode: ''
  }
}

関数

もし transition キーが関数で設定された場合：

export default {
  transition(to, from) {
    if (!from) {
      return 'slide-left'
    }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

トランジションは各ページ遷移時に適用されます：

• / to /posts => slide-left,
• /posts to /posts?page=3 => slide-left,
• /posts?page=3 to /posts?page=2 => slide-right.