vue项目添加路由动画

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

<script>
export default {
  name: 'App',
  data () {
    return {
      transitionName: ''
    }
  },
  watch: {
    '$route' (to, from) {
      const toRouterLevel = to.meta.routerLevel
      const fromRouterLevel = from.meta.routerLevel
      console.log(fromRouterLevel)
      console.log(toRouterLevel)
      // console.log(to, from)
      // const toDepth = to.path.split('/').length
      // const fromDepth = from.path.split('/').length
      // console.log(to.path)
      // console.log(from.path)
      if (toRouterLevel > fromRouterLevel) {
        console.log('slide-left')
        this.transitionName ='slide-left' 
      } else if(toRouterLevel < fromRouterLevel) {
        console.log('slide-right')
        this.transitionName ='slide-right'
      }
    }
  }
}
</script>
<style>
 .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all .5s;
    position: absolute;
    height: 100vh;
  }
  .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>

 

来源：CSDN

作者：胜天一子半

链接：https://blog.csdn.net/qq_37942845/article/details/104768381