模仿微信的页面切换效果 Vue的过渡效果的时候，mode属性的"in-out"、"out-in"设置了不起作用

Question

效果 ： 移动vue项目想模仿微信，微博页面切换的效果
方案 ：使用了<transition> 动画，但是每次切页的时候会有空白，使用mode：out-in，但是不起效果
查找了一些资料，发现：
过渡模式是建立在多组件切换的基础上的，也就是动态组件切换，并且当两个被切换的元素是同种标签的内容时,加上key 区分
比如：这样才有效果

 <transition name\="on" mode\="out-in"\><!--mode只适用于一个transition内的同标签切换\-->
    <button v-if\="show" key\="but1"\>on</button\>
    <button v-else key\="but2"\>off</button\><!--key为了防止只是修改内容不重新渲染\-->
  </transition\>

问题：因为我使用了keep-alive对入口进行了包裹，所以不起作用

  <transition :name="transitionName" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive && isRouterAlive" class="Router" key="com1"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName" mode='out-in'>
      <router-view v-if="!$route.meta.keepAlive && isRouterAlive" class="Router" key="com2"></router-view>
    </transition>

想请教下应该怎么解决页面切换的时候留白问题呢？