Hello，大家好，我是小编鹏仔，鹏仔一直觉得VUE在H5端路由跳转时交互特别丑，一直想写成那种点击滑动切换类的效果，趁着这两天工作不是很忙就网上搜了下，最终在多个搜索结果中选择了一种方式实现，效果如下图所示，点击路由跳转时是页面是滑动切换。
逻辑其实还是很简单的，就是监听在路由切换时加css效果即可，下方跟着鹏仔来一步一步的去添加实现吧！
首先，我们在router.js中，给每个要切换的路由meta中加index索引，用来判断页面动画的方向（页面在返回或者跳转判断向右滑动还是向左滑动方向，简单理解为上下页区分吧）。
{
path: '/feedbackList',
name: 'feedbackList',
component: () => import('../views/teacher/feedbackList/index'),
meta:{
title: "反馈列表",
index: 1
}
},
{
path: '/feedbackRecordList',
name: 'feedbackRecordList',
component: () => import('../views/teacher/feedbackList/record'),
meta:{
title: "记录列表",
index: 2
}
},
{
path: '/feedbackRecordDetails',
name: 'feedbackRecordDetails',
component: () => import('../views/teacher/feedbackList/details'),
meta:{
title: "记录详情",
index: 3
}
}接着，我们打开 App.vue 页面
将
<router-view />
修改为
<transition :name="transitionName"> <router-view /> </transition>
在data中定义
data() {
return {
transitionName: "",
};
}在watch中监听路由跳转时修改name
watch:{
$route(to,from){
//实现路由跳转动画
if (to.meta.index > from.meta.index)
this.transitionName = "slide-left";
if (to.meta.index < from.meta.index)
this.transitionName = "slide-right";
}
}最后在css中添加样式，即可实现
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {
will-change: transform;
transition: all .5s;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate(-100%);
}
.slide-right-leave-active {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-leave-active {
opacity: 0;
transform: translateX(-100%);
}这个切换是使用了css的位移属性，如果您时间够闲，可以改为 渐变 旋转 缩放 等花里胡哨的效果（https://www.lmcjl.com/post/131.html）。
下方为完整的App.vue页面的代码
<template>
<div id="app">
<transition :name="transitionName">
<router-view />
</transition>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
transitionName: "",
};
},
methods: {
},
components: {
},
watch:{
$route(to,from){
//实现路由跳转动画
if (to.meta.index > from.meta.index)
this.transitionName = "slide-left";
if (to.meta.index < from.meta.index)
this.transitionName = "slide-right";
}
}
}
</script>
<style>
#app {
height: 100%;
min-height: 100%;
}
/* 路由页面跳转交互 */
.slide-right-enter-active,.slide-right-leave-active,.slide-left-enter-active,.slide-left-leave-active {
will-change: transform;
transition: all .5s;
position: absolute;
}
.slide-right-enter {
opacity: 0;
transform: translate(-100%);
}
.slide-right-leave-active {
opacity: 0;
transform: translateX(100%);
}
.slide-left-enter {
opacity: 0;
transform: translateX(100%);
}
.slide-left-leave-active {
opacity: 0;
transform: translateX(-100%);
}
</style>本文链接：https://my.lmcjl.com/post/21034.html
展开阅读全文
4 评论