API: transition 属性

transition 属性

Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。

  • 类型: StringObjectFunction

如果想给某个页面自定义过渡特效的话,只要在该页面组件中配置 transition 字段即可:

  1. export default {
  2. // 可以是字符
  3. transition: ''
  4. // 或对象
  5. transition: {}
  6. // 或函数
  7. transition (to, from) {}
  8. }

String

如果 transition 属性的值类型是字符类型, 相当于设置了动效配置对象的 name 属性:transition.name

  1. export default {
  2. transition: 'test'
  3. }

Nuxt.js 将使用上面的配置来设置 Vue.js transition 组件,如下:

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

Object

如果 transition 属性的值类型是对象类型:

  1. export default {
  2. transition: {
  3. name: 'test',
  4. mode: 'out-in'
  5. }
  6. }

Nuxt.js 将使用上面的配置来设置 Vue.js transition 组件,如下:

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

transition 允许配置的字段介绍:

属性字段类型默认值描述
nameString“page”所有路由过渡都会用到的过渡名称。
modeString“out-in”所有路由都用到的过渡模式,见 Vue.js transition 使用文档
cssBooleantrue是否给页面组件根元素添加 CSS 过渡类名。如果值为 false,路由过渡时将只会触发页面组件注册的 Javascript 钩子事件方法(不会设置 css 类名)。
durationIntegern/a在页面切换的持续时间(以毫秒为单位)详情请参考 Vue.js documentation
typeStringn/a指定过滤动效事件的类型,用于判断过渡结束的时间点。值可以是 “transition” 或 “animation”。 默认情况下, Nuxt.js 会自动侦测动效事件的类型。
enterClassStringn/a目标路由动效开始时的类名。 详情请参考 Vue.js transition 使用文档
enterToClassStringn/a目标路由动效结束时的类名。 详情请参考 Vue.js transition 使用文档
enterActiveClassStringn/a目标路由过渡过程中的类名。详情请参考 Vue.js transition 使用文档
leaveClassStringn/a当前路由动效开始时的类名。 详情请参考 Vue.js transition 使用文档
leaveToClassStringn/a当前路由动效结束时的类名。 详情请参考 Vue.js transition 使用文档
leaveActiveClassStringn/a当前路由动效过程中的类名。详情请参考 Vue.js transition 使用文档

你也可以在页面组件事件里面使用 Javascript 来控制过渡动效,可以称之为 JavaScript 钩子方法

  • beforeEnter(el)
  • enter(el, done)
  • afterEnter(el)
  • enterCancelled(el)
  • beforeLeave(el)
  • leave(el, done)
  • afterLeave(el)
  • leaveCancelled(el)

注意:如果使用纯 Javascript 控制路由过渡动效,建议将 transition 组件的 css 属性的值设置为 false。这样可以避免 Vue 做 CSS 动效相关的侦测逻辑,同时防止 CSS 影响到过渡的动效。

Function

如果 transition 属性的值类型时函数:

  1. export default {
  2. transition(to, from) {
  3. if (!from) {
  4. return 'slide-left'
  5. }
  6. return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  7. }
  8. }

这时页面导航的动效如下:

  • / to /posts => slide-left
  • /posts to /posts?page=3 => slide-left
  • /posts?page=3 to /posts?page=2 => slide-right