10000 <Transition appear>, wrapped in another node, doesn't work with Suspense · Issue #12435 · vuejs/core · GitHub
[go: up one dir, main page]
Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
upschk opened this issue Nov 18, 2024 · 4 comments
Open

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

upschk opened this issue Nov 18, 2024 · 4 comments
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: suspense scope: transition

Comments

@upschk
Copy link
upschk commented Nov 18, 2024 •
edited
Loading

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 edison1105 added scope: transition scope: suspense has workaround A workaround has been found to avoid the problem 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 19, 2024
@edison1105
Copy link
Member

the recommended way is

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

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

@edison1105 edison1105 added 🔩 p2-edge-case and removed 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Nov 19, 2024
L33Z22L11 added a commit to L33Z22L11/blog-v3 that referenced this issue Nov 29, 2024
@L33Z22L11
feat: enhance transitions in ZAside, article page, archive
e17369c 
- Some transition is affected by vuejs/core#12435
@cernymatej
Copy link
cernymatej commented Feb 4, 2025 •
edited
Loading

sometimes, it is not possible to change the order of those components

for example, my modal components have the following structure:

<Teleport>
  <Transition>
    <div>

and I would like to wrap them in an async component wrapper with suspense elsewhere

is it considered a bug or will Vue support only the mentioned order of transition + suspense?

@mikehwagz
Copy link

An example of this being an issue is that it seems to break appear for Nuxt page transitions. I created a reproduction of that here: https://github.com/mikehwagz/vue-nuxt-transition-bug

Here is an issue in the Nuxt repo about this: nuxt/nuxt#14715

cc @danielroe

If this is actually a Nuxt bug, I am happy to create an issue there. Let me know how I can help!

@OrbisK OrbisK mentioned this issue May 27, 2025
Closed
@DanyloIvashev
Copy link

we cannot change the order in NuxtPage @edison1105

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
has workaround A workaround has been found to avoid the problem 🔩 p2-edge-case scope: suspense scope: transition
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@edison1105 @mikehwagz @cernymatej @DanyloIvashev @upschk
0