Want to take a look at our new docs? Our new docs are now in beta. Have fun!

API: ページ `transition` プロパティ

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

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

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

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

文字列

transition キーに文字列がセットされたときは transition.name として用いられます。

export default {
  transition: 'test'
}

上のように設定されると、コンポーネントは次のようにセットされます:

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

オブジェクト

transition キーにオブジェクトがセットされたとき:

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

上のように設定されると、コンポーネントは次のようにセットされます:

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

transition オブジェクトが持つことができるプロパティは以下のとおり:

キーデフォルト定義
nameString"page"すべてのトランジション時に適用されるトランジション名
modeString"out-in"すべてのトランジション時に適用されるトランジションモード。詳細は Vue.js のドキュメント 参照
cssBooleantrueCSS トランジションクラスを適用するか否か。デフォルトは true です。false を設定すると、コンポーネントのイベントで登録された JavaScript フックのみがトリガーになります
durationIntegern/aトランジションが適用される時間(ミリ秒)です。詳細は Vue.js のドキュメント 参照
typeStringn/aトランジション終了のタイミングを判定するために待ち受けるトランジションのイベントタイプを指定します。"transition" または "animation" を指定できます。デフォルトでは、より時間がかかるほうのタイプが自動的に選ばれます
enterClassStringn/aトランジション開始時の状態のクラスです。詳細は Vue.js のドキュメント 参照
enterToClassStringn/aトランジション終了時の状態のクラスです。詳細は Vue.js のドキュメント 参照
enterActiveClassStringn/aトランジション中に適用されるクラスです。詳細は Vue.js のドキュメント 参照
leaveClassStringn/aトランジション開始時の状態のクラスです。詳細は Vue.js のドキュメント 参照
leaveToClassStringn/aトランジション終了時の状態のクラスです。詳細は Vue.js のドキュメント 参照
leaveActiveClassStringn/aトランジション中に適用されるクラスです。詳細は Vue.js のドキュメント 参照

ページの 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 ルールがトランジションに干渉するのを防ぎます。

トランジションモード

ページのデフォルトの transition モードは Vue.js のデフォルトモードとは異なります。 transition モードはデフォルトで out-in がセットされます。leaving と entering のトランジションを同時に実行したいときは、mode: '' というように 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'
  }
}

トランジションは各ページ遷移時に次のように適用されます:

  • / から /posts へ遷移するとき => slide-left
  • /posts から /posts?page=3 へ遷移するとき => slide-left
  • /posts?page=3 から /posts?page=2 へ遷移するとき => slide-right
Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us