VueJs Transition 不作为动态组件工作

Question

目标：

使用动态组件为 Vue V3.
创建自定义可重用过渡组件 vue2-transitions npm 包使用了与下面相同的方法，它不适用于 v3，所以我决定自己做一个简单的。

CustomTransition.Vue

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

SomeOtherComponent.vue

<div>
  <custom-transition>
    <span v-if="show">This does not work.</span>
  </custom-transition>
</div>

这不起作用，我不知道为什么。 <transition> 元素是这样渲染的。

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
      <span>This does not work.</span>
</transition>

但是，

当我这样重写 CustomComponent.vue 时。

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</transition>

它工作得很好。

编辑

我添加了一个 JSFiddle，以防有人想尝试一些东西。

Answer 1

终于从vue社区找到了解决方案。 link to working jsfiddle

要使此组件正常工作：

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

在组件中显式导入 Transition 和 TransitionGroup 组件并注册它们。

import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup,
  },
  data() {
    return { show: false };
  }
}

link 到 github issue 在 vue-next 仓库中。