这篇文章主要介绍了vue路由前进后退动画效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-route-transition
vue router 切换动画
特性
- 模拟前进后退动画
- 基于css3流畅动画
- 基于sessionStorage，页面刷新不影响路由记录
- 路由懒加载，返回可记录滚动条位置
- 前进后退的判断与路由路径规则无关
- 支持任意基于Vue的UI框架
demo
手机扫码
在线预览
说明
配套包含两个组件
- vue-route-t本文来源gaodai#ma#com搞*!代#%^码网%ransition 负责动画
- router-layout 负责页面排版。 主要是解决transform动画，position:fixed异常问题
像往常一样使用
npm i vue-route-transition --save
main.js
import RouteTransition from 'vue-route-transition' Vue.use(RouteTransition)
App.vue
页面，如果有吸附头部，或吸附底部元素的情况下才需要使用router-layout组件
<header> 头部导航 </header><div></div><div></div> ... <footer> <button>底部按钮</button></footer>
参考文件
Github
github
开源协议
本项目基于 MIT 协议，请自由地享受和参与开源。
总结
以上就是vue路由前进后退动画效果的实现代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue路由前进后退动画效果的实现代码
转载请注明原文链接：vue路由前进后退动画效果的实现代码
