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

如果想给某个过渡特效的话，只要在该组件中配置 transition 字段即可：

export default {
  // 可以是字符
  transition: ''
  // 或对象
  transition: {}
  // 或
  transition (to, from) {}
}

String

如果 transition 的值类型是字符类型， 相当于设置了动效配置对象的 name ：transition.name。

export default {
  transition: 'test'
}

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

<transition name="test">

Object

如果 transition 的值类型是对象类型：

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

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

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

transition 允许配置的字段介绍：

你也可以在组件事件里面使用 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 的值类型时：

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