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中