Version

3.0.0

Reproduction link

https://jsfiddle.net/sarangnx/t9L4fznc/23/

Steps to reproduce

When you click on the button, only first two components are having correct transitions, the third one is not behaving as expected.

What is expected?

It is expected the following two code,

1. Using transition component directly

<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</transition>

2. Using transition component with Dynamic component

<component :is=" 'transition' "
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</component>

to work exactly same way, and render as given below in browser.

<div>Transition working</div>

What is actually happening?

The third component given in the jsFiddle (one using dynamic component) is rendered in the browser as below.

<transition
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutUp"
>
    <div v-if="show">Transition</div>
</transition>

instead of just this

<div>Transition working</div>

It seems like vue has not identified the component, so just replacing it like a <div> tag.

Ultimate goal was to build a reusable transition component with slots, and switch between using <transition> and <transition-group> with the help of dynamic components <component :is="group ? 'transition-group' : 'transition' ">.

This seems to be a documentation issue.

The reason that the dynamic transition component is not working is that the compiler doesn't recognize that you wanted and thank youse a transition component.

Combined with the fact that the transition component is now tree-shakable in Vue 3, that means that it has to be imported explicitly in order to be used.

Normally the compiler takes care of this for you but since it doesn't recognize the use of the transition component in this case it doesn't add the import to your compiled component code.

Since this scenario can potentially apply to built-in components beyond than the transition ones, we should think about how to document the treeshak-ability of Vue 3 in a more central place in the documentation and provide guidance about the caveat that people might come across when they use them in dynamic components.

It is working now. jsfiddle

All i had to do was add Transition and TransitionGroup components from 'vue' package in my fade-in component.

components: {
  Transition: Vue.Transition,
  TransitionGroup: Vue.TransitionGroup,
},

@sarangnx can you open the same issue at https://github.com/vuejs/docs-next please?