transition プロパティ

  • 型: 文字列 または オブジェクト

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

デフォルト:

{
  name: 'page',
  mode: 'out-in'
}

例(nuxt.config.js):

module.exports = {
  transition: 'page'
  // または
  transition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}

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

layoutTransition プロパティ

  • 型: 文字列 または オブジェクト

レイアウトトランジションのデフォルト設定を指定するために使われます。設定は layout と同じです。

デフォルト:

{
  name: 'layout',
  mode: 'out-in'
}

例 (nuxt.config.js):

export default {
  layoutTransition: 'layout'
  // または
  layoutTransition: {
    name: 'layout',
    mode: 'out-in'
  }
}

例グローバル css :

.layout-enter-active, .layout-leave-active {
  transition: opacity .5s
}
.layout-enter, .layout-leave-active {
  opacity: 0
}

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する