奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

vue.cli3+router,实现页面切换动效

时间:2018-08-08 16:00来源: 作者:Vuez
想了半天才把标题名字取好,怕没想好别人搜索不进来
想了半天才把标题名字取好,怕没想好别人搜索不进来!

好的方案肯定是要和大家分享的。

Vue自带的transition过渡动效可以很快的实现页面显示和隐藏。然后给页面enter进入前和levat离开前加上transtion动画就可以有动效了。


但是,也就是细节所在,我们做导航页面切换就不一样啦。

大家在用app的时候,从首页跳到分类页,再到购物车页,页面是从左边离开,右边进来的。没错吧!

然后倒着点,从购物车到分类再到首页,页面是从右边离开,左边进来的,对吧!

你想想,你想想。就一个transition标签的name能搞定吗?

答案肯定是不行的咯。

实现流程:

第一步:在vue-router中,给这四个页面定义meta元信息num编号,首页编号1、分类页编号2。。。以此类推

第二步:在app.vue中watch观察$route路由属性,判断to和from两个参数,如果from之前的页面编号比to现在的页面编号小,就是从左至右。反之

第三步:给tansition绑定:name属性,使动画动态改变

第四步:从左至右就给左边离开,右边进来的动画,即离开的样式是translate(-100%,0)。进来的样式是translate(100%,0)

最后,我在思考要不要发整个代码,前思后想还是不发了。你们若评论区有要求再发。

学习吗,不能直接复制滴滴滴滴!
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-08-08 15:08

关注奔三路小程序,方便你我他