Nuxt 3 Release Candidate がリリースされました! v3.nuxtjs.org で詳細について見れます。

翻訳されたページ このページのコンテンツは古い可能性があります。

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 オブジェクトが持てるプロパティは以下の通りです:

キー デフォルト 定義
name String "page" すべてのルートトランジションに適用されるトランジション名です。
mode String "out-in" すべてのルートに適用されるトランジションモードです。詳細は Vue.js のドキュメント を参照してください。
css Boolean true CSS トランジションクラスを適用するかどうかを設定します。デフォルトは true です、もし false に設定した場合コンポーネントのイベント経由で登録された JavaScript フックのみがトリガーとなります。
duration Integer n/a トランジションが適用される時間(ミリ秒)です。Vue.js のドキュメント を参照してください。
type String n/a トランジション終了のタイミングを判定するために待ち受けるトランジションのイベントタイプを指定します。指定可能な値は "transition" または "animation" です。デフォルトではより期間の長いほうのタイプが自動的に検出されます。
enterClass String n/a トランジションクラスの開始状態です。Vue.js のドキュメント を参照してください。
enterToClass String n/a トランジションの終了状態です。Vue.js のドキュメント を参照してください。
enterActiveClass String n/a トランジション中に適用されるクラスです。Vue.js のドキュメント を参照してください。
leaveClass String n/a トランジションクラスの開始状態です。Vue.js のドキュメント を参照してください。
leaveToClass String n/a トランジションの終了状態です。Vue.js のドキュメント を参照してください。
leaveActiveClass String n/a トランジション中に適用されるクラスです。Vue.js のドキュメント を参照してください。

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.