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（好像是这个，哈哈哈哈哈哈哈哈，有点忘了）。