vue路由切换实现动画

//写在子路由的父级页面上
     <keep-alive>
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </keep-alive>

//样式
<style scope>
.fade-enter-active, .fade-leave-active {
     
     
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
     
     
  opacity: 0;
}
</style>