路线转换

Vue路由器切换动画

特征

前向和后向动画的模拟基于css3。平滑动画基于会话存储。页面刷新不会影响路由记录的延迟加载。返回可记录滚动条位置的判断与路由路径规则无关。支持任何基于Vue的UI框架演示

手机扫码

在线预览

解释

包装由两部分组成

Vue-route-transition负责动画，router-layout负责页面布局。主要解决变形动画和位置：固定的异常问题，照常使用

NPM I vue-路线-过渡-保存

main.js

从' vue-route-transition'Vue导入route transition . use(route transition)app . vue

模板vue-route-transition id=' app '/vue-route-transition/模板页面，如果有吸附头或吸附底元素，只需要使用路由器布局组件

模板路由器-布局标题槽=“标题”标题导航/标题div/div/div.页脚槽='页脚'按钮底部按钮/按钮/页脚/路由器-布局/模板参考文件

开源代码库

开源代码库

开源协议

本项目基于麻省理工协议，请自由享受和参与开源。

摘要

以上是边肖介绍的vue路由前向和后向动画效果的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！