vue动画效果

app.vue

第一步

<transition :name="transitionName">
      <keep-alive :include="home">
        <router-view />
      </keep-alive>
    </transition>
tip:在`app.vue`中，使用`transition`把`router-view`包裹起来

第二步

 data() {
    return {
      transitionName: "slide-left"
    };
  },
  watch: {
    $route(to, from) {
      // 通过判断路由自定义的级别来判断是转入还是转出

      if (to.meta.level > from.meta.level) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }

第三步

<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 <!-- 
  这个是必须的, 是为了让页面脱离文档流, 不然的话, 后进入的页面会从页面底部出来
  这个定位会直接添加到路由匹配的组件根元素上, 所以页面根组件最好设定其宽度为100vw
 -->
 width: 100vw;
 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);
}
</style>

第四步

router/index.js

meta: {
      // 自定义路由的级别
      level: 2
    },