You are browsing Nuxt 2 docs. Go to Nuxt 3 docs, or learn more about Nuxt 2 Long Term Support.

翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

Transition プロパティ

ページのデフォルトプロパティとレイアウトトランジションを設定します。

pageTransition プロパティ

Nuxt v2.7.0 では "transition" キーに代わり "pageTransition" キーが導入され、名前が layout transition キーに統合されています。

  • 型: String または Object

ページトランジションのデフォルトプロパティを設定するために使われます。

デフォルト：

{
  name: 'page',
  mode: 'out-in'
}
nuxt.config.js
export default {
  pageTransition: 'page'
  // or
  pageTransition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

nuxt.config.js 内の transition キーはページトランジションのデフォルトプロパティを指定するために使われます。transition キーがオブジェクトのときに利用可能なキーの詳細についてはページトランジションのプロパティ を参照してください。

layoutTransition プロパティ

  • 型: String または Object

レイアウトトランジションのデフォルトプロパティを設定するために使われます。name オプションで指定された値は layouts フォルダの layout で指定された名前で動くように設定されています。

デフォルト：

{
  name: 'layout',
  mode: 'out-in'
}
nuxt.config.js
export default {
  layoutTransition: 'layout'
  // or
  layoutTransition: {
    name: 'layout',
    mode: 'out-in'
  }
}
assets/main.css
.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}