Transitions with v-if statements at root-level of components aren't working the same way as in Vue 2 #7649
Comments
|
This isn't a vue3 bug. if you use out-in mode in transition, you need to use <template>
<button @click="handleAddCounter">Step</button>
to cycle through counter: {{ counter }} name is {{ names[counter] }}
<div class="transition">
<Transition name="slide-up" mode="out-in">
<Suspense>
<component :is="names[counter]" :key="counter"></component>
</Suspense>
</Transition>
</div>
</template>I find this issue resolution from https://github.com/vuejs/core/blob/main/packages/vue/__tests__/e2e/Transition.spec.ts#L1375 |
|
Thank you @AlexVagrant for pointing this out, but I am not sure it's save to use
https://vuejs.org/guide/built-ins/suspense.html And if this is indeed the solution, then it should be mentioned in the Migration Guide |
|
Follow up: https://stackblitz.com/edit/vue-3-transition-with-root-level-v-if-and-suspsense |
|
Oh, and when using this feature, you end up with such messages in the console:
|
|
While this does work for the reduced test-case I posted above, in the code base that I am porting from Vue 2 to Vue 3, |
|
Ok, click the https://stackblitz.com/edit/vue-3-transition-with-root-level-v-if-and-suspsense
|
|
Hi guy, I know how to solve this bug. It's a
The following is a simple solution (not the final one)： |
|
@AlexVagrant great find! Are you working on a PR to fix this? |
Yes, I will fix this bug soon, please give me a little time. |
|
@yyx990803 would be great to see this merged, so we can finally remove the workarounds that we needed to add when transitioning from vue2 to vue3… |
|
Thank you @yyx990803 and @AlexVagrant ! Can't wait to finally remove our workarounds for this : ) |
Vue version
3.2.45
Link to minimal reproduction
https://stackblitz.com/edit/vue-3-transition-with-root-level-v-if
Steps to reproduce
Compare with the same reproduction for Vue 2:
The reproduction displays a button that each time it is clicked, it cycles a counter between 1..2..3.
For each number, a component is rendered.
One,TwoandThree.Component
Twohas av-if="false"statement at root-level, essentially not rendering the component at all.What is expected?
In Vue 2, once the counter reaches 3, component
Threeis rendered with a transition as expected, just like when thev-ifis applied outside of componentTwowhen it is rendered, e.g. with a chaingedv-if,v-else-ifstatement nested in theTransition.Screen-cast of the expected behavior:
vue-2-transition-with-root-level-v-if.mp4
What is actually happening?
In Vue 3, once the counter reaches 3, component
Threeis not rendered at all, the transition appears to be remaining in a confused state. Only once the counter goes back to 1, the transition starts working again.Screen-cast of the actual behavior:
vue-3-transition-with-root-level-v-if.mp4
System Info
System: OS: macOS 13.1 CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz Memory: 2.57 GB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 19.6.0 - ~/.nvm/versions/node/v19.6.0/bin/node Yarn: 3.3.1 - ~/.nvm/versions/node/v19.6.0/bin/yarn npm: 9.4.0 - ~/.nvm/versions/node/v19.6.0/bin/npm Browsers: Chrome: 109.0.5414.119 Chrome Canary: 112.0.5578.0 Firefox: 109.0.1 Firefox Nightly: 111.0a1 Safari: 16.2 Safari Technology Preview: 16.4Any additional comments?
While this particular example may seem a bit nonsensical, this situation can be encountered in a real scenario, e.g. if the component rendered uses
v-ifat root-level to only render its contents once some data is fetched asynchronously. In Vue 2, such a component would still apply a transition once it is ready to be rendered. This is broken in Vue 3 not only for the component itself, but even for the next component that would render itself after the one that usesv-ifin such a way.The text was updated successfully, but these errors were encountered: