vue转场动画

为了使客户的体验感更强，我们的APP中应该加入适当的转场动画效果来提升舒适感

1. 首先我们要监听路由然后判断其是前进还是后退，来实现不同的动画

export default {
  data() {
    return {
      transitionName: "slide-left"
    };
  },
  watch: {
    $route(to, from) {
      // 通过判断路由自定义的级别来判断是转入还是转出
      if (to.meta.index > from.meta.index) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};

2. template

  <div id="app">
    <transition :name="transitionName">
      <router-view />
    </transition>
  </div>

3. style

/*
    动画样式
    will-change: transform    优化渲染速度
*/

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.5s;
  width: 100%;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

4. router/index.js

  // 首页
  {
    path: "/",
    name: "Home",
    component: () => import("../views/Index.vue"),
    meta: {
      keepAlive: true,
      index: 1 //判断index来决定页面的层级
    }
  },
  // 详情
  {
    path: "/detail",
    name: "Detail",
    component: () => import("../components/Hot/Detail.vue"),
    meta: {
      keepAlive: false,
      index: 2 //判断index来决定页面的层级
    }
  },
  // 城市搜索
  {
    path: "/city",
    name: "City",
    component: () => import("../components/Header/City.vue"),
    meta: {
      index: 3 //判断index来决定页面的层级
    }
  },