vue.js - VueJs Transition 不作为动态组件工作

Question

目标:

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

自定义Transition.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 };
  }
}

链接到github issue在 vue-next 存储库中。