<transition appear> is breaking/flickering when toggling hide/show while transition is happening

[rs3d]

Vue version

3.4.21

Link to minimal reproduction

https://codesandbox.io/p/sandbox/adoring-roman-nlw932

Steps to reproduce

Spam click the Show Overlay button

transition-appear-vue3.mp4

What is expected?

The fade transition should smoothly toggle between opacity: 0 and opacity: 1. no matter how fast you click.

transition-appear-vue2.mp4

What is actually happening?

The behavior from vue@2 is exptected.
Demo: https://codesandbox.io/p/sandbox/heuristic-gould-pyl93t i

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 34.41 GB / 63.91 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.81)
    Internet Explorer: 11.0.22621.1

Any additional comments?

Related issue without "appear" option #2482

[quiteeasy]

I have identified an issue in the Vue 3 repository that seems to persist even in the absence of an 'appear' prop. Specifically, when clicking on the overlay to close it, there is a short period during which no transition classes are applied, causing the styles to revert to their final state(there are flicks because of it).

In contrast, the Vue 2 version did not exhibit this behavior. Instead, if a transition had not yet been completed, the 'v-enter-to' and 'v-enter-active' classes were immediately replaced with 'v-leave-active' and 'v-leave-to' classes, ensuring a seamless transition without being in the final state.

To address this discrepancy, I am preparing a pull request (PR) that aims to correct the behavior in Vue 3, aligning it more closely with the transition class handling in Vue 2. I look forward to any feedback.

[quiteeasy]

It also affects <transition-group> the same way

[quiteeasy]

#10688