Vue 优雅的实现移动端过场动画

前言

在做移动端项目的时候，每次进行push操作，页面都是一闪切到下个界面，整个体验十分H5，尤其是嵌入APP的Hybrid项目，这种体验很容易让用户发觉这是一个H5页面，那我们怎么样才能解决这种突兀的转场呢？

思考

之前用过ionic3开发过一些项目，为了支持APP的热更新功能
作为UI框架，他们在过场动画方面下足了功夫，让整个APP体验提升了不少
所以我也希望可以在vue项目中加入丝滑的过场动画，来承上启下

刚好Vue官方也提供了专门处理动画的<transition>组件
我们就尝试用该组件来完成页面的转场动画

动画形式主要参考iOS系统push页面时的过渡效果

iOS过场动画效果

解决方案

代码样例依赖：

"vue": "^3.0.5",
"vue-router": "^4.0.11"
"vite": "^2.4.4"

1、动画部分解析

• A -> B ， A在下，B在上，且B左侧增加阴影
  A从(0, 0)向左移50%
  B从(0, 100%)向左移100%

• B -> A ， A在下，B在上，且B左侧增加阴影
  A从(-50%, 0)向右移50%
  B从(0, 0)向右移100%

• 整个动画过程是有渐变蒙版，以及动画的贝塞尔曲线，这里忽略蒙版变化，贝塞尔也选择常用的内置ease-out

2、实现动画内容

• css部分：按照上面分解的内容，可以较容易的实现

这里有几个遇到的坑：
1、页面切换动画执行from页面白屏
因为是文档流的原因，老页面被新页面挤到下面去了，所以使用absolute让其定位到应该出现的位置

2、阴影设置的问题
需要在初始状态和active状态都设置阴影，以避免阴影出现渐变

.slide-right-enter-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
    /* 这里保持动画过程中的阴影 */
    box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
    will-change: transform;
    transition: all 0.5s ease-out;
    /* 这里为了解决入栈出栈时的白屏现象 */
    position: absolute;
}


.slide-right-enter-from {
    /* 这里设置0，为了避免一开始页面内容一闪而过的情况 */
    opacity: 0;
    transform: translateX(-50%);
}
.slide-right-leave-to {
    z-index: 100;
    /* 这里为了优化阴影溢出屏幕，不至于突然消失 */
    transform: translateX(102%); 
}
.slide-right-leave-from {
    box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}


.slide-left-enter-from {
    z-index: 100;
    transform: translateX(100%);
    box-shadow: -20px 0 20px 0px rgba(0, 0, 0, 0.1);
}
.slide-left-leave-to {
    opacity: 0.4;
    transform: translateX(-50%);
}

• 动画设置完成了，接下来需要判断动画触发逻辑，前进还是后退
  这里我采用了路由跳转设置params.routeMode的方式来决定动画形式

const router = useRouter();

router.beforeEach((to, from) => {

    const toDepth = to.params.routeMode;

    if (toDepth === "push") {
        to.meta.transitionName = "slide-left";
    } else if (toDepth === "pop") {
        to.meta.transitionName = "slide-right";
    }
    return true;
});

• 最后是模板，路由入口设置动画

<router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transitionName">
        <component :is="Component" />
    </transition>
</router-view>

结果展示

vue过场动画效果

完整Demo地址：https://github.com/ZTStory/vue_page_transition
在线演示：https://ztstory.github.io/vue_page_transition/#/
ps：如何搭建自己GitHub Pages？看这里

欢迎大家互相学习，喜欢别忘记star哦！