Vue version

3.2.37

Link to minimal reproduction

https://codesandbox.io/s/priceless-allen-xbfcss?file=/src/App.vue

Steps to reproduce

Just click "Toggle" button

What is expected?

Fade-in and fade-out transition effect

What is actually happening?

Fade-out transition is not working

System Info

No response

Any additional comments?

Transition does not perfectly working when using v-if directive. But, vue^2.6.11 its works. https://codesandbox.io/s/quizzical-volhard-p8oznf?file=/src/App.vue

Why is it changed to unmounted before the transition is finished?

It is necessary when using the Dialog component as in the example below. https://codesandbox.io/s/keen-cray-mw860x?file=/src/App.vue

This is expected behaviour in Vue 3. When the transition component itself is being removed, Vue 3 will not run a transition for it and its contents.

It's technically this breaking change: https://v3-migration.vuejs.org/breaking-changes/transition-as-root.html#transition-as-root

Even though the migration guide shows it explicitly in the context of being a root node. The effect is the same though.