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

动手实现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%;
}

写在最后

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