VueJs Transition Not working as Dynamic component

Question

Goal:

Use dynamic components to create custom reusable transition components for Vue V3.
vue2-transitions npm package uses the same method as below and it does not work with v3, So I decided to make a simple one for myself.

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>

This does not work, I have no clue why. The <transition> element is rendered like this.

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

But,

When I rewrite the CustomComponent.vue like this.

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

It is working perfectly fine.

Edit

I've Added a JSFiddle, in case someone wants to try something out.

I am using animate.css for animations. I did not post the full name in above question, which doesn't really matter. Full name would be animate__animated animate__fadeInDown and animate__animated animate__fadeOutUp. — srx
– srx, Commented Sep 25, 2020 at 14:28
The issue seems to be with dynamic component <component :is="componentType">. It is working when i use names of global components that i've defined, but does not work with vue.js transition component. — srx
– srx, Commented Sep 25, 2020 at 14:31

srx · Accepted Answer · 2020-09-25 16:52:22Z

3

Finally found the solution from vue community. link to working jsfiddle

For this component to work:

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

Import the Transition and TransitionGroup components explicitly in the component and register them.

import { Transition, TransitionGroup } from 'vue'

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

link to github issue in vue-next repo.

answered Sep 25, 2020 at 16:52

srx

3421 gold badge6 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs Transition Not working as Dynamic component

Goal:

CustomTransition.Vue

SomeOtherComponent.vue

But,

Edit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Goal:

CustomTransition.Vue

SomeOtherComponent.vue

But,

Edit

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related