vue-router路由动画左滑右滑效果实现

这里用到路由的钩子函数，组件路由 beforeRouteUpdate。

一个页面是有二级导航的，在切换二级导航的时候，对应的内容是在变化的；这个页面是复用的，只会生成一次，切换二级导航的时，如何知道导航在更新呢？

  一个页面有二级导航的时候，点击二级导航的时候导航路径更新了，会触发路由钩子函数beforeRouteUpdate。

Vue模板中的应用：

name是定义的过渡动画的名称

  <keep-alive>
      <transition :name="transitionName">
        <router-view/>
      </transition>
    </keep-alive>

 mounted中定义组件路由钩子函数beforeRouteUpdate：

  beforeRouteUpdate(to, from, next) {
    const tp = to.path;
    const fp = from.path;

    let leftPaths = [
      `fp === "/edit" && tp === "/edit/rename"`,
      `fp === "/edit" && tp === "/edit/interest"`
    ];
    let rightPaths = [
      `fp === "/edit/rename" && tp === "/edit"`,
      `fp === "/edit/interest" && tp === "/edit"`
    ];

    this.leftSlide(leftPaths, fp, tp);
    this.rightSlide(rightPaths, fp, tp);

    setTimeout(() => {
      next()
    }, 50)
  },

 

methods里定义的方法：

    leftSlide(paths, fp, tp) {
      paths.forEach(path => {
        if (eval(path)) {
          this.transitionName = 'slide-left';
        }
      })
    },
    rightSlide(paths, fp, tp) {
      paths.forEach(path => {
        if (eval(path)) {
          this.transitionName = 'slide-right';
        }
      })
    },

定义全局的class类：

.slide-left-enter {
  transform: translateX(100%);
}
.slide-left-enter-active{
  transition: transform .3s;
}
.slide-left-enter-to{
  transform: translateX(0);
}
.slide-left-leave {
  transform: translateX(0);
}
.slide-left-leave-active {
  transition: transform .3s
}
.slide-left-leave-to {
  transform: translateX(0);
}

.slide-right-enter {
  transform: translateX(0);
}
.slide-right-enter-active{
  transition: transform .3s;
}
.slide-right-enter-to{
  transform: translateX(0);
}
.slide-right-leave {
  transform: translateX(0);
}
.slide-right-leave-active {
  transition: transform .3s;
}
.slide-right-leave-to {
  transform: translateX(100%);
}