<Transition appear>, wrapped in another node, doesn't work with Suspense

[upschk]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9UsFu1DAQ/ZWpL700CRWclhAJUCXgAIj26IvlzG5dHNvyONmtqv13xnGyXVDpzTPz3vjNm3kSH0OopxHFRrSkowkJCNMYOunMEHxM8NkPAbbRD3BZNznI8Mv30rVNITCUg4RDsCohRwDt7UgBHZWI47lJU2rNWbFtznjiSiTS3m3Nrn4g71jTU2ZIoZluLMYfIRnvSIoNzJVcU9b6/bc5l+KIV2te36P+/UL+gQ45J8XPiIRxQilOtaTiDlMp39x+xwO/T8XB96Nl9CvFX0jejlljgX0aXc+yz3Cz2q+zs8bt7ujmkNiKdagsNCOPM14Kdjo797/Rn+W+rd/NPOmO7OK6pReW+trSLqoK2t5MoK0i+iDFPqoQsvwOqmpd5V1ULDiLAacGZNhW9WwLZKyKC4yB99fdF+RxYe+j7S/ahhNLj+a5ydnXDf+9/PTXXXBI6dEi8HEE7DueIYcdTzo/ak3Eo9ZZR4UuYayUTmbKOy9Ji2rCJVnsSycBG/BBaZMe4ZoAFSGfNvu4Uku/fP//dEu+dFrYG3iTieL4B5bSGqk=

Steps to reproduce

1. Uncomment <div class="wrapper">.
2. Refresh the page.

What is expected?

The h1 element fades in on refresh.

What is actually happening?

The element just appears without any transition.

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 139.14 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - /opt/homebrew/bin/node
    npm: 10.8.3 - /opt/homebrew/bin/npm
  Browsers:
    Safari: 18.0.1
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

I have a project which uses transitions with 'appear' prop a lot, and they stopped working when I added Suspense in App.vue. You can see that they work at the root of the component, however this can't always be possible.

Transitions also work if the component is displayed by RouterView and the RouterView is wrapped in Suspense:

<Suspense>
  <RouterView />
</Suspense>

But this isn't the recommended way and is probably wrong.

Updated: transitions also work if wrapped in <Suspense suspensible>: Playground

[edison1105]

the recommended way is

<Transition>
  <Suspense>    
  </Suspense>
</Transition>

see https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components