vue路由前進後退動畫
阿新 • • 發佈:2018-12-10
vue-route-transition
vue router 切換動畫
特性
- 模擬前進後退動畫
- 基於css3流暢動畫
- 基於sessionStorage,頁面重新整理不影響路由記錄
- 路由懶載入,返回可記錄滾動條位置
- 前進後退的判斷與路由路徑規則無關
- 支援任意基於Vue的UI框架
demo
手機掃碼
說明
配套包含兩個元件
vue-route-transition
負責動畫router-layout
負責頁面排版。 主要是解決transform
動畫,position:fixed
異常問題
像往常一樣使用
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>
複製程式碼
頁面,如果有吸附頭部,或吸附底部元素的情況下才需要使用router-layout
元件
<template>
<router-layout>
<header slot="header">
頭部導航
</header>
<div></div>
<div></div>
...
<footer slot="footer">
<button>底部按鈕</button>
</footer>
</router-layout>
</template>
複製程式碼
Github
開源協議
本專案基於 MIT 協議,請自由地享受和參與開源。