vue 路由跳转 动画 超详细

vue 提供了transition用来写动画 首先第一步 我们在App.vue 中 用transition把 router-view 包起来

<transition :name="SkipSwitchName">
      <router-view ></router-view>
  </transition>
   data() {
    return {
      SkipSwitchName: "",
  },

这里可以看到我的 name 是使用 动态绑定的 这一步 使用来 实现 上一层和下一层的不同动画切换的 所以我们在data里面定义了SkipSwitchName，然我我们下一步先 把 跳转动画写好。根据 vue 官网 transition 提供的 值 来进行写动画

.Skright-enter-active,
.Skright-leave-active,
.Skleft-enter-active,
.Sklef-leave-active {
  transition: all 600ms;
}
//先给 所要用的上下层级跳转写一个过渡时间
//然后你就可以发挥自己的想象力来写自己动画了 下面是一个例子
.Skright-enter {
  transform: translate3d(-100%, 0, 0);
}
.Skright-leave-to {
  transform: translate3d(100%, 0, 0);
}
.Skleft-enter {
  transform: translate3d(100%, 0, 0);
}
.Skleft-leave-to {
  transform: translate3d(-100%, 0, 0);
}

做完这些 我门下一部就开始做 动态绑定name值的切换 并 判断上下层 来绑定对应的动画name，
那么第一步 肯定就是要判断路由啦。应为我们是时时监听了，这里 我们就可以用 vue 提供的 watch 来做了下图 使用watch 监听 $router的变化 （关于router 在我置顶文章中有露面），当然只是获取到路由还是不够的 所以我们在给每个路由做一个标识 当然名字是可以随便定义的 但要保持一致

// 登录
    {
      path: '/',
      name: 'idnex',
      component: idnex,
      meta: {
        title:"会员绑定",
        tx:1
      }
    },
    // 首页
    {
      path: '/Home',
      name: 'Home',
      component: Home,
      meta: {
        title:"主页",
        tx:2
      }
    },

 watch: {
    $route(to, from) {
      if (to.meta.tx > from.meta.tx) {
        this.SkipSwitchName= "Skright";
      } else {
        this.SkipSwitchName= "Skleft";
      }
    }
  }

这样 路由跳转动画 就结束了 发挥自己的想象力做出 好看的动画把！