W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
Nuxt.js 使用 Vue.js 的組件來實現(xiàn)路由切換時的過渡動效。
如果想給某個頁面自定義過渡特效的話,只要在該頁面組件中配置 transition 字段即可:
export default {
// 可以是字符
transition: ''
// 或?qū)ο? transition: {}
// 或函數(shù)
transition (to, from) {}
}
如果 transition 屬性的值類型是字符類型, 相當(dāng)于設(shè)置了動效配置對象的 name 屬性:transition.name。
export default {
transition: 'test'
}
Nuxt.js 將使用上面的配置來設(shè)置 Vue.js transition 組件,如下:
<transition name="test">
如果 transition 屬性的值類型是對象類型:
export default {
transition: {
name: 'test',
mode: 'out-in'
}
}
Nuxt.js 將使用上面的配置來設(shè)置 Vue.js transition 組件,如下:
<transition name="test" mode="out-in">
transition 允許配置的字段介紹:
屬性字段 | 類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
name | String | "page" | 所有路由過渡都會用到的過渡名稱。 |
mode | String | "out-in" | 所有路由都用到的過渡模式,見 Vue.js transition 使用文檔。 |
css | Boolean | true | 是否給頁面組件根元素添加 CSS 過渡類名。如果值為 false ,路由過渡時將只會觸發(fā)頁面組件注冊的 Javascript 鉤子事件方法(不會設(shè)置 css 類名)。 |
duration | Integer | n/a | 在頁面切換的持續(xù)時間(以毫秒為單位)詳情請參考 Vue.js documentation |
type | String | n/a | 指定過濾動效事件的類型,用于判斷過渡結(jié)束的時間點。值可以是 "transition" 或 "animation"。 默認(rèn)情況下, Nuxt.js 會自動偵測動效事件的類型。 |
enterClass | String | n/a | 目標(biāo)路由動效開始時的類名。 詳情請參考 Vue.js transition 使用文檔 。 |
enterToClass | String | n/a | 目標(biāo)路由動效結(jié)束時的類名。 詳情請參考 Vue.js transition 使用文檔 。 |
enterActiveClass | String | n/a | 目標(biāo)路由過渡過程中的類名。詳情請參考 Vue.js transition 使用文檔 。 |
leaveClass | String | n/a | 當(dāng)前路由動效開始時的類名。 詳情請參考 Vue.js transition 使用文檔 。 |
leaveToClass | String | n/a | 當(dāng)前路由動效結(jié)束時的類名。 詳情請參考 Vue.js transition 使用文檔 。 |
leaveActiveClass | String | n/a | 當(dāng)前路由動效過程中的類名。詳情請參考 Vue.js transition 使用文檔 。 |
你也可以在頁面組件事件里面使用 Javascript 來控制過渡動效,可以稱之為 JavaScript 鉤子方法:
注意:如果使用純 Javascript 控制路由過渡動效,建議將 transition 組件的 css 屬性的值設(shè)置為 false。這樣可以避免 Vue 做 CSS 動效相關(guān)的偵測邏輯,同時防止 CSS 影響到過渡的動效。
如果 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)航的動效如下:
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: