Transition should sniff for teleport in custom components

Fuzzyma commented 2 months ago

Vue version

3.5.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNVE1v2zAM/SuadugGNHaG7pS5xT5QYNthG9YcfVFsOlEjS4JEOwmC/PdRUpw6RVrsZIt87+mRErXnX6zN+g74jBe+ctIi84CdvSu1bK1xyPbMQcMOrHGmZVcEvTqlvpnWHuNZHhZB6epTqUtdGe1JamU27DYIvGuE8vC+1EWetqENaIHQWiUQaMVYsegQjWafKyWr9W3Jj/Q34Vvyuwf65N9lDUWekIk1d0J7iZKYWrRAvEbUQPiQpXx02U9kc1QsOcsTM3+iRjv/ITYHBbF2NJRbmHpHcmfiRyRha9kzWQcJYyhe5BQYdPJB6JKTIh/1hZYedyr8ZsHLBDSCm4S2Xw8hBaKHCRq2D2rGikribsamdBSHoDAmonlGiwd4TvxwiSgqlD08I6dgouOphhkTSrFpduMZCA+D2ltqRIIuRLVeOtPpesYWqgsIxjayxhVtPp3abQysQC5XOI4sjKvBUcRumTdK1sQmqbQBXa3YKH7N0dMFbOQye/RG092Om5a8oqsgFbjfNrj0JZ8lOyFHjs3mZ4yh60KdKV6toFpfiD/6bYiV/I8DD66nS3LKoXBLwJS+f/gFW/o/JVtTd4rQryT/AhXXBY8J9pUaRbZHuOj2RxxDqZdzf79FoOYfiwpGA/IQ8SWnsQxT8FLpT3Zvso+RR/2kLg4jfeFxGD0Pp5EYvxHxEXht1i8N0jAcLw7O2dicTQk//AP1sJ3y

Steps to reproduce

Click the button

What is expected?

Both should transition in

What is actually happening?

One transitions correctly, the other throws a warning and blinks into existance

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 6850HS with Radeon Graphics
    Memory: 11.86 GB / 15.28 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 3.2.2 - ~/.nvm/versions/node/v22.2.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
    pnpm: 7.25.0 - ~/.nvm/versions/node/v22.2.0/bin/pnpm
    bun: 1.1.8 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.55

Any additional comments?

This is a follow up from

5836

My Intention in #5836 was, that a user should be able to do this:

<Transition>
  <CustomComp />
</Transition>

<!-- Custom Comp -->
<Teleport>
  <div></div>
</Teleport>

However, the fix for #5836 only allows:

<Transition>
  <Teleport>
    <div></div>
  </Teleport>
</Transition>

For me as a user those 2 should feel equivalent. The way it is now is not really useful. If you are not gonna use a custom component inside transition, you could just easily swap teleport and transition around (which already worked before the fix):

<teleport>
  <transition>
    <div></div>
  </transition>
</teleport>

But the whole point of #5836 was to allow to transition any component that teleports internally. And since nesting a custom component into a transition works already, teleport should just be transparent in this case

Usecase:

modals <transition><Modal /></transition>
popovers
...

edison1105 commented 2 months ago

the underlying cause is the same as https://github.com/vuejs/core/issues/3338

Fuzzyma commented 2 months ago

Transitions of custom components with a single element work already. There is no multi root involved here. The teleport in between should just be invisible to the transition

vuejs / core