Transition should sniff for Teleport

[Fuzzyma]

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>

[RoosDev]

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>

[klausXR]

I'm also interested in this

[edison1105]

I made a PR. feel free to review.
playground

[zyxkad]

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>

[MarkSky]

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?

[edison1105]

@MarkSky The PR is not merged.

[MarkSky]

@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.

[edison1105]

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

[MarkSky]

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

I understand now, thank you.

[Andreashoj]

Was there a reason this PR was never merged ?

[vhovorun]

Still waiting when it'll be released

[renatodeleao]

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>

Have the same issue as @zyxkad.

Was trying to migrate a feature that used portal-vue to teleport and noticed that teleported nodes are not "caught" by TransitionGroup when it is the teleport target.

context: A FABs (Floating-action-buttons) bottom-right container in my app, and each view can "teleport" its own custom FABs in addition to some default ones already present.

The patch made by @edison1105 doesn't seem to fix it. Can this be considered a new issue?

• Demo with latest stable version
• Demo with @edison1105 patch version
• Original portal-vue issue and demo (for context purposes only)

[edison1105]

@renatodeleao
As you can see, TransitionGroup will not re-render after items change, so the transition is not working.

  <TransitionGroup name="list" tag="ul" id="teleport-target"/>

  <template v-for="item in items" :key="item">
    <teleport to="#teleport-target">
      <Item :key="item">{{ item }}</Item>
    </teleport>
  </template> 

[renatodeleao]

@renatodeleao As you can see, TransitionGroup will not re-render after items change, so the transition is not working.

  <TransitionGroup name="list" tag="ul" id="teleport-target"/>

  <template v-for="item in items" :key="item">
    <teleport to="#teleport-target">
      <Item :key="item">{{ item }}</Item>
    </teleport>
  </template> 

@edison1105 Here's an updated demo, where it does re-render but the transition still does not apply. The only difference is that instead of loop and render several teleport instances, i moved the loop inside a single teleport instance. (i suspect why the previous implementation doesn't work, but out-of-scope of this discussion).

  <h1>Teleported</h1>
  <TransitionGroup name="list" tag="ul" id="teleport-target" />
  
-  <template v-for="item in items" :key="item">
    <teleport to="#teleport-target">
-      <Item>{{ item }}</Item>
+      <Item v-for="item in items" :key="item">{{ item }}</Item>
    </teleport>
-  </template>

[edison1105]

@renatodeleao

Here's an updated demo, where it does re-render but the transition still does not apply.

The HTML has changed, but it was not due to a re-render by TransitionGroup. Instead, it resulted from a re-render by Teleport. The HTML displayed within TransitionGroup is added by Teleport, and animations are only triggered when the children of TransitionGroup itself change.

[renatodeleao]

@renatodeleao

Here's an updated demo, where it does re-render but the transition still does not apply.

The HTML has changed, but it was not due to a re-render by TransitionGroup. Instead, it resulted from a re-render by Teleport. The HTML displayed within TransitionGroup is added by Teleport, and animations are only triggered when the children of TransitionGroup itself change.

So if got it right, what you are suggesting since the beginning is that is not currently possible to declaratively teleport items into a TransitionGroup while keeping transitions working. Applying "force re-render techniques" to TransitionGroup component (like the :key="i" and the likes) after teleporting items won't work as well as there's no "diff".

I understand that there are other ways of implementing the same output, but original goal was to swap portal-vue dependency for teleport.

Thank you for your time to clarify, truly appreciated and hopefully this will be helpful for other community members that might land in this issue. 🙏

EDIT: i've highlighted declaratively because we can "teleport" — in a way — using a any global state solution that can be translated into rendering a list of dynamic component definitions from that state (which is basically recreating portal-vue if we want the same declartive API).

[TheKeymaster]

For those needing a workaround, i'm gonna explain the issue I've faced and how I solved it. This is how my component looked at first:

<template>
    <Transition name="fade">
      <Teleport to="body" v-if="isOpen">
        <div class="some-div" @click="isOpen = false">
          <img :src="imageUrl" @load="onLoad"/>
        </div>
      </Teleport>
    </Transition>
</template>

At first the issue I had was that I thought I couldn't change the order, because I had the v-if at my <Teleport>. After another think it turns out that it is possible, when I just add the v-if to my <div> instead, which turns out to make it work.

<template>
    <Teleport to="body">
      <Transition name="fade">
        <div class="some-div" @click="isOpen = false" v-if="isOpen">
          <img :src="imageUrl" @load="onLoad"/>
        </div>
      </Transition>
    </Teleport>
</template>

I know if you have a more complex component that renders multiple divs, this may not be feasable. At that point you may think about refactoring your components. I hope this helped some devs out there!