API transition属性
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