Suspended component + transition

[JobinJia]

Version

3.2.26

Reproduction link

SFC

Steps to reproduce

1. open link
2. Observe the animation happening only for loading

What is expected?

1. transition worked with suspense default slot
2. and the normal component

What is actually happening?

1. transition only work with suspense fallback slot, not the default slot
2. the normal component (not top await) loss transition animation

[posva]

Still unsure of why this is happening only with the router. I tried creating a version replicating what the router does but I still couldn't find it. I also noticed, the problem appears with flat routes too.

Any help on this one is welcome!

[edison1105]

@posva
if change the <style scoped> to <style> , it works fine. see https://codesandbox.io/s/white-river-3mf6q
here is no scopedId

[posva]

Thanks @edison1105

Still works on SFC Playground 🤔 I think I got confused between working or not working, it does not work without vue router indeed and removing scoped seems to be a workaround.

[edison1105]

@posva
I found something. Maybe this is not the right fix. Just a hint here.

• currentScopeId is null when createVNode from TopLevelAwait.vue in RouterView.
  

• when suspense resolved, we will cloned it in _createVNode because Component is a VNode. So we losed the scopedId
  

• If we reassign the value to the scopeId when clone it will solve the problem.
  

• Here is a difference, in SFC Playground. It is not a VNode, so each time createVnode is called, the scopeId is assigned the value.
  

[ferferga]

@edison1105 @posva I was facing the same issue with reusable transitions so I made up another (much simpler in my opinion) playground to better reproduce it, until I found this opened issue.

Here's the link

You can reproduce this by checking how the data-v-* attributes are missing on Suspense's inner div.

I can confirm that with #5195 I'm still having the issue (I rebased that PR into main and still the same thing).

[ferferga]

@edison1105 Another interesting finding: SFC link

I think this issue is basically solvable if Suspense passes down $attrs, so the data-v* attribute also gets passed down.

[edison1105]

@ferferga
I'll take a closer look at it later.