elementui过渡动画配合动态组件

过渡动画和动态组件配合使用时会导致页面异常：例如切换组件时，页面会出现空白，然后再显示正常

<template>
  <div class="gpt">
    <sidebar @newChat="newChat"></sidebar>
    <el-scrollbar style="width: 100%">
      <div class="gpt-chat">
        <transition name="el-fade-in">
          <component v-show="isShow" :is="dom[currentDom]" @toChat="toChat"></component>
        </transition>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>

import defaultCom from './components/default.vue'

import chatCom from './components/chat.vue'

import sidebar from './components/sidebar.vue'

const isShow = ref(true)

// new chat
const newChat = () => {
  isShow.value = false
  currentDom.value = 'defaultCom'
  nextTick(() => {
    isShow.value = true
  })
}
const currentDom = ref('defaultCom')
//动态组件对象
const dom = shallowReactive({
  defaultCom,
  chatCom,
})
const chatTitle = ref('')
const toChat = (type) => {
  currentDom.value = 'chatCom'
  chatTitle.value = type
}
</script>

关键是v-show，通过控制组件的显示隐藏可解决这个问题