Vue怎样给页面加上切换效果、路由切换效果

一、需求

我想写一个左右滑动样式的路由切换。
比如进入详情页的时候，向左滑动。
从详情页返回到主页的时候，向右滑动。

二、参考文档

1. vue-router文档基于路由的动态过渡
2. vue-transition 动画
个人理解大概意思：

1、路由组件可以利用 transition 标签包裹。
2、需要切换的路由需要加个标识，是进入还是返回。
3、通过路由的切换，来设置class类名，来设置页面切换的样式。

在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

三、开始搞

1、使用 transition 包裹住需要切换的路由视图

<transition>   <router-view></router-view>
</transition>

2、给路由加上标识，专业术语叫 - 路由元信息。 =_=！
meta:{ index:0 / 1 / 2 / 3 / 4… }

  {path:'/app', name:"views",  component: views, meta:{ index:0 },},{path: '/choiceAddress', name: 'choiceAddress',  component: addrespage,meta:{ index:1 },},

3、在包裹的文件里监听一下router的变化，打印一下看能不能获取到 meta 信息，

watch:{$route(to, from){console.log(`to`, to)console.log(`from`, from)//根据to和from定义的meta,判断为前进、还是后退，同时更改类名if(to.meta.index > from.meta.index){this.silderName = 'slide-left';}else{this.silderName = 'slide-right';}}
}

控制台打印：

4、给 transition 标签添加上name属性；

<transition :name="silderName">   <router-view></router-view>
</transition>
...data(){return {silderName:''}
},

5、编写css样式

.slide-left-enter-active, .slide-left-leave-active,
.slide-right-enter-active, .slide-right-leave-active {transition: all 0.3s;
}
.slide-left-enter, .slide-left-leave-to {transform: translate3D(-100vw,0,0);
}
.slide-right-enter, .slide-right-leave-to{transform: translate3D(100vw,0,0);
}

四、预览效果

发现是比较死板的上一个页面消失后，下一个页面才会进入，于是重写了一下css， 把 v-live-active 的过度时间去掉了，感觉好很多。

.slide-left-enter-active, .slide-right-enter-active{transition: all 0.3s;
}
.slide-left-enter, .slide-left-leave-to {transform: translateX(-100vw);
}
.slide-right-enter, .slide-right-leave-to{transform: translateX(100vw);
}

参考文档 https://blog.csdn.net/qq_33236453/article/details/79110485

Vue怎样给页面加上切换效果、路由切换效果相关推荐

若依前后端分离版(vue)中配置页面跳转的路由
场景若依前后端分离版本地搭建开发环境并运行项目的教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在此基 ...
Vue设置部分页面缓存，设置部分页面不缓存
在项目中经常会遇到需要设置部分页面缓存,在路由切换时,不必每次都拉取接口更新,这样可以很大程度的提升用户体验,也可以减少接口请求次数,降低服务器消耗: 首先我们先了解下vue这个框架在页面缓存知识 1 ...
vue 路由切换动画（滑入，滑出效果）
最近做的一个小项目,需要做路由切换,页面滑入滑出的效果,总结下实现的思路和方法. router-view 用 transition 标签包裹 router-view 组件,动态添加动画名,data 里 ...
【Vue】组件复用导致的路由切换时页面不刷新问题
页面逻辑通过router-link,携带不同params参数,导航向同一个组件. 出现问题1 不同路由切换时组件上的页面不刷新. 问题原因1 mounted() {this.getData();}, ...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了: keep-aliv ...
vue路由切换时内容组件的滚动条回到顶部
情景描述 1.页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b 2.页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可 ...
前端js实现路由切换页面 pushState replaceState
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变,但不会让浏览器刷新页面. pushState 会追加浏览器的路由历史,但不会刷新页面,可以用这种 ...
Android之实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果
1 需求实现夸克浏览器书签和历史页面滑动时候右上角图标切换效果,页面滑动的时候,图标也左右滑动,但是只是显示其中的一个 https://www.captainai.net/st/ 2 代码实现 xm ...
vue 扫码页面限制区域_Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作在一个页面中有两个及以上的区域,需要通过设置路由的index.js,来操作这些区域的内容 app.vue 中设置: index.js中设置: import vue from 'v ...