动手实现H5仿原生app前进后退切换效果

前言

最近在优化H5页面，我注意到当开发完成的移动端H5页面嵌入到微信小程序或者原生app中时，当触发页面路由切换会与原生app看上去有点格格不入，因为H5页面<router-view>切换路由时是直接替换了原来页面的内容，在视觉效果上看到的是页面的跳转变化都是在同一个页面上，并没有一级二级页面这种视觉差，因此，参考了原生app中的页面切换效果，我打算将已经成熟的H5项目改造一下，优化视觉上的体验效果。
话不多说，先上效果：

实现思路

在观察原生APP页面切换时不难发现，其实就两个效果，在路由前进时旧的页面需要从中心往左平移直至隐藏，新的页面则需要右边隐藏状态平移到屏幕中央。在页面返回到时候做相反的操作，要返回的页面从左边隐藏平移到屏幕上，原来的页面平移到右边隐藏。由于项目用的是Vue3，我就用vue作为代码演示。

transition 组件

由于vue提供了一个过渡动画的标签transition，那么在这里我就不重复造轮子了，直接用这个标签来实现过度效果。简单介绍下transition这个标签。
1、必需只能包含一个根元素
2、主要是针对于v-if、v-show或路由动态组件,增加动态过渡效果
3、可根据name自定义过渡动画效果
4、自定义动画类名 -enter、-leave、-enter-active、-leave-active、-enter-to、-enter-to

具体使用方法可到官网查看，这就不过多介绍了。

开始实现

App.vue 改造

为了实现全局的页面切换效果，所以直接在App.vue中将router-view包裹，实现代码如下：

  <router-view v-slot="{ Component }"><transition :name="transName"><keep-alive :include="includeRoute"><component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" /></keep-alive></transition><transition :name="transName + 'normal'"><component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" /></transition></router-view>

注意，这里使用两个transition是需要考虑如果有部分页面是keep-alive,有部分不是的情况，需要赋予不同的name值

判断当前路由前进还是后退

1、首先在定义路由时需要增加路由层级，用于后续判断页面是前进还是后退。代码如下：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';const routes: Array<RouteRecordRaw> = [{path: '/',name: 'app',redirect:'/home',},{path: '/home',name: 'home',component: () => import(/* webpackChunkName: "home" */ './home.vue'),meta: {title: '首页',keepAlive: true,deepth: -1}},{path: '/page1',name: 'page1',component: () => import(/* webpackChunkName: "page1" */ './page1.vue'),meta: {title: 'page1',keepAlive: true,deepth: 1}},{path: '/page2',name: 'page2',component: () => import(/* webpackChunkName: "page2" */ './page2.vue'),meta: {title: 'page2',keepAlive: false,deepth: 2}},];const router = createRouter({history: createWebHistory('/'),routes
});export default router;

2、根据路由切换，判断页面的前进后退状态,动态改变transition的name，用来实现不同的过渡效果

// 监听当前路由的变化
watch(() => router.currentRoute.value,(newValue: any, oldValue: any) => {if (newValue?.meta?.deepth && oldValue?.meta?.deepth) {if (oldValue.meta.deepth <= newValue.meta.deepth) {transName.value = 'push';} else {transName.value = 'back';}}},{ immediate: true }
);

3、css部分实现,主要定义页面前进后退时的动画效果

.push-enter-active {animation-name: push-in;animation-duration: 0.5s;
}.push-leave-active {animation-name: push-out;animation-duration: 0.5s;
}.pushnormal-enter-active {animation-name: push-in;animation-duration: 0.5s;
}.pushnormal-leave-active {animation-name: push-out;animation-duration: 0.5s;
}@keyframes push-in {0% {transform: translate(100%, 0);}100% {transform: translate(0, 0);}
}@keyframes push-out {0% {transform: translate(0, 0);}100% {transform: translate(-100%, 0);}
}.back-enter-active {animation-name: back-in;animation-duration: 0.5s;
}.back-leave-active {animation-name: back-out;animation-duration: 0.5s;
}.backnormal-enter-active {animation-name: push-in;animation-duration: 0.5s;
}.backnormal-leave-active {animation-name: back-out;animation-duration: 0.5s;
}@keyframes back-in {0% {width: 100%;transform: translate(-100%, 0);}100% {width: 100%;transform: translate(0, 0);}
}@keyframes back-out {0% {width: 100%;transform: translate(0, 0);}100% {width: 100%;transform: translate(100%, 0);}
}

注意

为了实现两个页面能左右切换，所以在定义每个页面样式时需要使用fixed布局

#app>div {position: fixed;top: 0;left: 0;width: 100%;height: 100%;
}

写在最后

在前端开发中通过实现一些动态效果，在用户使用体验上都能得到较大的改善，作为前端页面优化的一部分，有更多的动画效果值得我们花时间去研究。欢迎点赞收藏，关注我，了解更多的前端知识。