Vue router过度动画的一个问题，请大佬看看

Question

//app.vue


<div id="app">
   <transition name="test" mode="out-in">
       <router-view></router-view>
   </transition >
</div>

//首页

<div class="cart_wrap">
    <headerNav @headerClick="headerClick" :option="true"></headerNav>
    <div>
        //这里面是跟后台交互数据渲染的，写在的mount里面
        //但是如果没有这一坨，首次加载的过度动画就没有问题
    </div>
</div>

首次进入的时候过度动画没有预想的效果而且还会发生抖动，但是路由跳转却又是正常的，请问大佬这可能是什么原因呢

Answer 1

加上判断，根据数据返回来显示div模块，是否能解决，如果不行就只能从app.vue的动画下手了

data : {
  dataList:[]
}
 <div v-if="dataList.length>0">
        //这里面是跟后台交互数据渲染的，写在的mount里面
        //但是如果没有这一坨，首次加载的过度动画就没有问题
 </div>