vue keepalive 配合 transition 动画会重叠

Question

<template>
    <div>
        <transition :name="transitionName" @afterLeave="afterLeave">
            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>
            </keep-alive>
        </transition>
        <transition :name="transitionName" @afterLeave="afterLeave">
            <router-view  v-if="!$route.meta.keepAlive" class="child-view"></router-view>
         </transition>
    </div></template>

 watch: {
    $route(to, from) {     let toLevel = to.meta.level;     let fromLevel = from.meta.level;     this.transitionName = toLevel>fromLevel?'slide-left':'slide-right'
     this.has = toLevel>fromLevel?false:true //判断
    }
  }

如上述代码 只在router-view 进行了v-if判断 所以会存在两个transition
如果在 keepalive 上加 v-if 判断 组件就不会缓存 
如果在 transition加入判断 页面就不会显示
应该在哪里判断 又或者如何处理 ？
求帮忙！！！

Answer 1

建议吧transition 放在keep-alive中