BaseTransition Unmounting Optimization leads to animation disappear

[TalexDreamSoul]

Vue version

3.5.3

Link to minimal reproduction

https://play.vuejs.org/#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

Steps to reproduce

1. Run the application
2. Click "Toggle Component" to see the component animate out abnormally with a 2-second fade
3. Click "Unmount All" to see the component immediately disappear without animation

What is expected?

When using "Toggle Component", you'll see the full 2-second leave animation
When using "Unmount All", the animation will be skipped because isUnmounting is set to true by the onBeforeUnmount hook

What is actually happening?

The animatoin dosenot appear

System Info

Any additional comments?

The onBeforeUnmount hook that sets isUnmounting to true
The check in the onLeave method that skips animation when isUnmounting is true

[edison1105]

you should add v-if on the slot content instead of <transition-demo>
see https://vuejs.org/guide/built-ins/transition.html#reusable-transitions

[TalexDreamSoul]

you should add v-if on the slot content instead of <transition-demo>
see https://vuejs.org/guide/built-ins/transition.html#reusable-transitions

Sorry. I'm using this on vue-router. I need to play transitions among routes to simulate animations on native mobile.

For example, new route will enter from right side with translateX(120%) to translateX(0%). And leave with reverse of it.

[edison1105]

Can you provide a minimal demo using vue-router, perhaps we can help you find a suitable solution.