vue ~~ 路由切換時 transition添加動畫

第一步：

給路由router-view添加動畫，必須name 和 key都設置，如果沒有唯一值key，就會沒有動畫效果

<transition :name="transitionName">
      <router-view class="child-view"
                   :key="$route.name"></router-view>
</transition>

 

第二步：

在data里定義動畫變量：transitionName

data () {
    return {
      transitionName: ''
    };
},

第三步：

監測路由變化，判斷前進還是后退，進行不同的class賦值

  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler (to, from) {
        if (from != undefined && to.meta.footerIndex > from.meta.footerIndex) {
          this.transitionName = 'slide-left';
        } else {
          this.transitionName = 'slide-right';
        }
      }
    },
},

第四步：

設置class

/* 動畫效果 */
.child-view {
  position: absolute;
  width: 100%;
  transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  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);
}

　

第五步： 

設置路由，需注意設置每個路由的獨有的key，如我設置的就是footerIndex

       {
          path: '/', 
          name: 'index',
          meta: { footerIndex: 0 },
          component: index
        },
        {
          path: '/college',
          name: 'college',
          meta: {  footerIndex: 1 },
          component: college,
        },
        {
          path: '/collegeMajor/:attr/:type/:area',
          name: 'collegeMajor',
          meta: {footerIndex: 2 },
          component: college,
        },
        {
          path: '/major',
          name: 'major',
          meta: { footerIndex: 2 },
          component: major
        }