【问题标题】：VueJs Transition Not working as Dynamic componentVueJs 过渡不作为动态组件工作
【发布时间】：2020-09-25 10:42:09
【问题描述】：

目标：

使用动态组件为 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，以防有人想尝试一下。

【问题讨论】：

请分享css
我正在使用animate.css 制作动画。我没有在上面的问题中发布全名，这并不重要。全名将是animate__animated animate__fadeInDown 和animate__animated animate__fadeOutUp。
问题似乎与动态组件 <component :is="componentType"> 有关。当我使用我定义的全局组件的名称时它正在工作，但不适用于 vue.js transition 组件。

标签： vue.js transition custom-component vuejs3

【解决方案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 };
  }
}

在vue-next repo 中链接到github issue。

【讨论】：