translate to怎么设置返回动效

来源：蜘蛛抓取(WebSpider) 时间：2017-10-12 05:59 标签： translate to

想了半天才把标题名字取好怕沒想好别人搜索不进来！

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

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 to(-100%,0)。进来的样式是translate to(100%,0)

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

学习吗不能直接复制滴滴滴滴！

我要回帖

更多关于 translate to 的文章

 

随机推荐