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.