Nuxt.js transition 屬性

transition 屬性

Nuxt.js 使用 Vue.js 的組件來實(shí)現(xiàn)路由切換時(shí)的過渡動(dòng)效。

• 類型： String 或 Object 或 Function

如果想給某個(gè)頁(yè)面自定義過渡特效的話，只要在該頁(yè)面組件中配置 transition 字段即可：

export default {
  // 可以是字符
  transition: ''
  // 或?qū)ο?  transition: {}
  // 或函數(shù)
  transition (to, from) {}
}

String

如果 transition 屬性的值類型是字符類型， 相當(dāng)于設(shè)置了動(dòng)效配置對(duì)象的 name 屬性：transition.name。

export default {
  transition: 'test'
}

Nuxt.js 將使用上面的配置來設(shè)置 Vue.js transition 組件，如下：

<transition name="test">

Object

如果 transition 屬性的值類型是對(duì)象類型：

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

Nuxt.js 將使用上面的配置來設(shè)置 Vue.js transition 組件，如下：

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

transition 允許配置的字段介紹：

你也可以在頁(yè)面組件事件里面使用 Javascript 來控制過渡動(dòng)效，可以稱之為 JavaScript 鉤子方法：

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

注意：如果使用純 Javascript 控制路由過渡動(dòng)效，建議將 transition 組件的 css 屬性的值設(shè)置為 false。這樣可以避免 Vue 做 CSS 動(dòng)效相關(guān)的偵測(cè)邏輯，同時(shí)防止 CSS 影響到過渡的動(dòng)效。

Function

如果 transition 屬性的值類型時(shí)函數(shù)：

export default {
  transition (to, from) {
    if (!from) { return 'slide-left' }
    return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
  }
}

這時(shí)頁(yè)面導(dǎo)航的動(dòng)效如下：

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