Переход VueJs не работает как динамический компонент

Цель:

Используйте динамические компоненты для создания настраиваемых повторно используемых компонентов перехода для 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 на случай, если кто-то захочет что-то попробовать.


vue.js transition vuejs3 custom-component
person srx    schedule 25.09.2020    source источник
comment
пожалуйста, поделитесь css   -  person Boussadjra Brahim    schedule 25.09.2020
comment
Я использую animate.css для анимации. Я не указал полное имя в предыдущем вопросе, что на самом деле не имеет значения. Полное имя будет animate__animated animate__fadeInDown и animate__animated animate__fadeOutUp.   -  person srx    schedule 25.09.2020
comment
Проблема связана с динамическим компонентом <component :is="componentType">. Это работает, когда я использую имена глобальных компонентов, которые я определил, но не работает с компонентом vue.js transition.   -  person srx    schedule 25.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

Наконец-то нашел решение от сообщества vue. ссылка на рабочий 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 в vue-next репозитории.

person srx    schedule 25.09.2020