vue3中内置transition过渡组件配合component动态组件问题

先上代码

<template>
  <Transition name="fade-transform" mode="out-in" appear>
        <component :is="activeComponent"></component>
   </Transition>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import PrimaryTableGroup from '@/components/WarningTable/PrimaryTableGroup.vue'
import localTableGroup from '@/components/WarningTable/localTableGroup.vue'
const isActive = ref(0)
const componentMap = {
  0: PrimaryTableGroup,
  1: localTableGroup
}
const activeComponent = shallowRef(componentMap[isActive.value])
// 此处是一个轮播图切换的回调 isActive: 0 , 1
const handleSwiperChange = (e) => {
  isActive.value = e
  activeComponent.value = componentMap[isActive.value]
}
</script>
<style lang="less" scoped>
 // css部分可以去 vue 官网查
  .fade-transform-enter-from {
    opacity: 0;
    transform: translateX(-30px);
  }
  .fade-transform-enter-to {
    opacity: 1;
    transform: translateX(0px);
  }

  .fade-transform-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
</style>

此时发现切换轮播图的时候 transition包裹的组件直接消失了

localTableGroup.vue

  <template v-for="(item, index) in bgList" :key="item.title">
      <BaseContainer :title="item.title" :backgroundImage="item.url">
         xxx....
      </BaseContainer>
    </template>

vue3中是可以允许多个根节点

问题就在transition包裹的组件必须是唯一根节点包裹的才能有过渡效果 所以包裹的动态组件必须都是只有一个根节点包裹的组件才可以实现过渡效果