TransitionGroup 和 keepAlive 共用产生的问题

问题：项目需要首页缓存，又需要进入和退出动画效果，使用Transition实现了进入退出动画，但是使用keep-Alive缓存组件时，报错。代码如下：

<transition :name="transitionName">
   <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive" />
</transition>

• 控制台警告非常难受

根据提示使用TransitionGroup进行包括，替换掉Transition

• 注意：缓存页面的隐藏显示，div层要用v-show来显示隐藏（v-show不会删除节点重新渲染），keep-alive里层的router-view 再用v-if，这样能确保触发动画效果。

最终解决（代码如下）

<transition-group :name="transitionName">
   <div v-show="$route.meta.keepAlive" key="keepAlive">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
   </div>
   <router-view v-if="!$route.meta.keepAlive" :key="$route.name" />
</transition-group>

`js:` 
watch: {
  $route(to, from) {
    const isBack = this.$router.isBack
        if (isBack) {
            this.transitionName = 'slide-right'
        } else if (from.path !== '/') {
          this.transitionName = 'slide-left'
        }
        this.$router.isBack = false
    }
 }
mounted() {
  if (window.history && window.history.pushState) {
     // 监听页面返回
      window.addEventListener('popstate', this.handleGoBack, false)
    }
 },
 destroyed() {
   window.removeEventListener('popstate', this.handleGoBack, false)
 },
 
// 监听返回操作 打标记
handleGoBack() {
   this.$router.isBack = true
},

`css:`
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}