vue 路由切換的動畫效果

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import './assets/js/fontSize'
export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  },
  watch:{
    $route(to, from) {
       //將不想有過渡動畫效果的部分路由寫進判斷條件中
      if(to.path !=='/' && to.path !=='/' && to.path !=='/' || from.path !=='/' && from.path !=='/' && from.path !=='/'){
        //如果to索引大於from索引,判斷為前進狀態,反之則為后退狀態
        if(to.meta.index < from.meta.index){
        //設置動畫名稱
          this.transitionName = 'slide-left';
        }else if(to.meta.index > from.meta.index){
          this.transitionName = 'slide-right';
        }else if(to.meta.index == 99){
          this.transitionName =""
        }
      }else{
        this.transitionName =""
      }
    }
  }
}
</script>

路由切換的效果主要是通過vue提供的transition標簽來實現的。如果你想要更多的過渡的效果，你可以使用Animation（好像是這個，哈哈哈哈哈哈哈哈，有點忘了）。