Nuxt.js transition 屬性

2020-02-13 17:29 更新

transition 屬性

Nuxt.js 使用 Vue.js 的組件來實現(xiàn)路由切換時的過渡動效。
  • 類型: String 或 Object 或 Function

如果想給某個頁面自定義過渡特效的話,只要在該頁面組件中配置 transition 字段即可:

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

String

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

export default {
  transition: 'test'
}

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

<transition name="test">

Object

如果 transition 屬性的值類型是對象類型:

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

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

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

transition 允許配置的字段介紹:

屬性字段類型默認(rèn)值描述
nameString"page"所有路由過渡都會用到的過渡名稱。
modeString"out-in"所有路由都用到的過渡模式,見 Vue.js transition 使用文檔。
cssBooleantrue是否給頁面組件根元素添加 CSS 過渡類名。如果值為 false,路由過渡時將只會觸發(fā)頁面組件注冊的 Javascript 鉤子事件方法(不會設(shè)置 css 類名)。
durationIntegern/a在頁面切換的持續(xù)時間(以毫秒為單位)詳情請參考 Vue.js documentation
typeStringn/a指定過濾動效事件的類型,用于判斷過渡結(jié)束的時間點。值可以是 "transition" 或 "animation"。 默認(rèn)情況下, Nuxt.js 會自動偵測動效事件的類型。
enterClassStringn/a目標(biāo)路由動效開始時的類名。 詳情請參考 Vue.js transition 使用文檔 。
enterToClassStringn/a目標(biāo)路由動效結(jié)束時的類名。 詳情請參考 Vue.js transition 使用文檔 。
enterActiveClassStringn/a目標(biāo)路由過渡過程中的類名。詳情請參考 Vue.js transition 使用文檔 。
leaveClassStringn/a當(dāng)前路由動效開始時的類名。 詳情請參考 Vue.js transition 使用文檔 。
leaveToClassStringn/a當(dāng)前路由動效結(jié)束時的類名。 詳情請參考 Vue.js transition 使用文檔 。
leaveActiveClassStringn/a當(dāng)前路由動效過程中的類名。詳情請參考 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 屬性的值設(shè)置為 false。這樣可以避免 Vue 做 CSS 動效相關(guān)的偵測邏輯,同時防止 CSS 影響到過渡的動效。

Function

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

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

這時頁面導(dǎo)航的動效如下:

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


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號