What problem does this feature solve?

Currently, it's not possible to wrap a teleport by a transition because Component inside <Transition> renders non-element root node that cannot be animated.

While I agree that transition shouldn't start trying to find the first actual element it can apply classes to in custom components, I think that there should be an exception for Teleport.

It's not an uncommon use case that you want to teleport some popover or modal to the body and want to add a transition when it appears or gets removed. I am aware that you can always transition the contents of the stuff you are teleporting but that is less flexible and composable. e.g. a reusable component that always ports itself to the body currently can't be wrapped by a custom transition.

Both components are part of the core library and also don't work as normal components do. So I think it shouldn't be a problem if the transition component sniffs if its child is a teleport and applies the transition to the teleported element instead. Ofc that would require that the teleport only consists of a single root but that is a given (the error message already makes that clear and could be changed for the teleport case: SyntaxError: <Transition> expects exactly one child element or component.)

What does the proposed API look like?

<transition>
  <teleport to="body">
    <div>Whatever</div>
  </teleport>
</transition>

Yes I'm agree with you. I would like to animate a component (like a modal) but inside the component I use a teleport ... so the transition doesn t work.

For me it look's like :

<transition> <ModalWindow> </transition>

and in the component ModalWindow : <Template> <teleport to=".myWonderfullDiv"> <div>Whatever</div> </teleport> </template>

I'm also interested in this

I made a PR. feel free to review. playground

Hello, could teleport support TransitionGroup? Now I'm doing this, but the animation didn't work

<div class="pinned">
  <TransitionGroup id="id" name="animation-class">
  <TransitionGroup/>
</div>
<div>
  <Teleport :disabled="!shouldPin" v-if="shouldShow"></Teleport>
</div>

I made a PR. feel free to review. playground

I just create a project just like yours: Teleport-in-Transition The had running, but the didn't run. If I miss anything?

@MarkSky The PR is not merged.

@MarkSky The PR is not merged.

I know. I just create a project and use your playground code. but the is not work in my project.

@MarkSky the version of vue in my playground is based on the PR.

@MarkSky the version of vue in my playground is based on the PR.

I understand now, thank you.

Was there a reason this PR was never merged ?