vue-route-transition
vue router 切换动画
特性
模拟前进后退动画
基于 CSS3 流畅动画
基于 sessionStorage, 页面刷新不影响路由记录
返回可记录滚动条位置
前进后退的判断与路由路径规则无关
支持任意基于 Vue 的 UI 框架
demo
手机扫码
在线预览 https://dreamback.github.io/vue-route-transition/
说明
配套包含两个组件
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
- https://github.com/dreamback/vue-route-transition
开源协议
本项目基于 协议, 请自由地享受和参与开源.
来源: https://juejin.im/post/5c0db79a5188256dd7744914