第三章 第一节 基于vue的WebApp过渡动画

在使用WebApp时，有时页面切换过渡有些生硬，这个时候可以加入过渡动画。但是个人建议如果没有特别需要，还是减少WebApp的动画渲染。毕竟通过WebView渲染和原生GPU渲染还是有很大差别。一句话就是，强扭的瓜不甜。
下面是基于Vue的过渡动画代码(根据个人需求改动)
App.vue

data() {
    return {
      transitionName: ""
    };
  },
  watch: {
    $route(to, from) {
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else if (to.meta.index < from.meta.index) {
        this.transitionName = "slide-right";
      } else if (to.meta.index == from.meta.index) {
        this.transitionName = "slide-right";
      }
    }
  },
<style>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  /* 过渡时长 */
  transition: all 250ms;
  /* position: static; */
  position: relative;
  /* position: fixed; */
  /* position: absolute; */
}
.slide-right-enter {
  opacity: 1;
  transform: translateX(-100%);
}
.slide-right-leave-active {
  opacity: 1;
  transform: translateX(0%);
}
.slide-left-enter {
  opacity: 1;
  transform: translateX(100%);
}
.slide-left-leave-active {
  opacity: 1;
  transform: translateX(-100%);
}
</style>

route.js(具体参考自身路由位置)

export const url = [
  //主页
  {
    path: '/index',
    meta: { index: 0 },
    component: () =>
      import('pages/index.vue')
  },
  //子页
  {
    path: '/son',
    meta: { index: 1 },
    component: () =>
      import('pages/son/son.vue')
  },
]

补充，在我的实践操作中，发现了一个问题，就是在过渡的时候会出现 页面切换不同步、元素挤压等问题

1.页面切换不同步解决方案

  /* 在切换页面最外层盒子套入 position: absolute*/
.box {
  position: absolute;
}

2.元素挤压
App.vue内的style切换动画方法修改

  /* 过渡时长 */
  /* position: static; */
  position: relative;
  /* position: fixed; */
  /* position: absolute; */