vue-route-transition

vue router 切換動(dòng)畫(huà)

特性

• 模擬前進(jìn)后退動(dòng)畫(huà)
• 基于css3流暢動(dòng)畫(huà)
• 基于sessionStorage，頁(yè)面刷新不影響路由記錄
• 路由懶加載，返回可記錄滾動(dòng)條位置
• 前進(jìn)后退的判斷與路由路徑規(guī)則無(wú)關(guān)
• 支持任意基于Vue的UI框架

demo

手機(jī)掃碼

在線預(yù)覽

說(shuō)明

配套包含兩個(gè)組件

• vue-route-transition 負(fù)責(zé)動(dòng)畫(huà)
• router-layout 負(fù)責(zé)頁(yè)面排版。 主要是解決transform動(dòng)畫(huà)，position:fixed異常問(wèn)題

像往常一樣使用

npm i vue-route-transition --save

main.js

import RouteTransition from 'vue-route-transition'Vue.use(RouteTransition)

App.vue

<template> <vue-route-transition id="app"> </vue-route-transition></template>

頁(yè)面，如果有吸附頭部，或吸附底部元素的情況下才需要使用router-layout組件

<template> <router-layout> <header slot="header">  頭部導(dǎo)航 </header> <div></div> <div></div> ... <footer slot="footer">  <button>底部按鈕</button> </footer> </router-layout></template>

參考文件

Github

github

開(kāi)源協(xié)議

本項(xiàng)目基于 MIT 協(xié)議，請(qǐng)自由地享受和參與開(kāi)源。

總結(jié)

以上所述是小編給大家介紹的vue路由前進(jìn)后退動(dòng)畫(huà)效果的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！