Цель:
Используйте динамические компоненты для создания настраиваемых повторно используемых компонентов перехода для 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 на случай, если кто-то захочет что-то попробовать.
animate__animated animate__fadeInDown
иanimate__animated animate__fadeOutUp
. - person srx   schedule 25.09.2020<component :is="componentType">
. Это работает, когда я использую имена глобальных компонентов, которые я определил, но не работает с компонентом vue.jstransition
. - person srx   schedule 25.09.2020