Conditional CSS classes not applied for items in TransitionGroup

[PhilippChEnBW]

Vue version

3.4.29

Link to minimal reproduction

https://play.vuejs.org/#eNrNVMtu2zAQ/JUtgcIJEMsO0l5U20AfQR+HtGgDtEDVAyuvbcYUSZCUIkPQv3cpyo7itkGOudjicGc5O1xuw14bk1QlspTNXG6F8eDQl2aRKVEYbT00YHEFLaysLmBEoaNMZSrXynkQHgsH8xBx8jNTAE34ASjQOb7GFEYfUEo9OouwcO+0ItTbEgPSdvhfnO/ayuUxZ8Wli6RM/Tp9lanZJOolpbQgIUZyj7QCmG3OF1faw5KYswktOvDacuWEF1q9t7o0oHiB84x57rYZiyEGqvFKW0JDZSBUrDBZCenRntQwX8CzOomaTjMG6RZ3fXTSF9DnomxCmdKD35lwTL7BfPtb10SqxoVeotzzYjbCJ3uiM1xBmkvuHAU1MAoax6GaUdop6jnkBVs0zfD0toUx9FAMaltyihLGCifhZsP/kRsH3wLlzrPHGDLw48lXPpsMGoWWzu8kgsu1wSUhSXccKqptzHMvKqQujKBEXmEP7lvWHzxMgUsJ0+SlA+QOqT3v74+par5L4dzRFnXw47L+jxUFhgd5JM/rfZJbsfQbYk6nz4di6C6L8P7oM5jw4+Riaurwmih7TBS8jkk81p4U5NryWKIUio7YULusN5FC/gYDyTl2xjzZqFZindw4rWiedEno+nVhhET72YQsLmPpXmPGyDR9+6nDwkzon3zfMv/Abxx1UUofXyw6tBX1zmHPc7tGH7cvv12R+MEmtV0pKfqBza/otCyDxhj2plRLkj2I69R+7KaiUOtrd1l7pJvqi7o/1DJGk/LtA6Xfyb1IXvRzrWXtHz7E32U=

Steps to reproduce

1. Click any checkbox to transfer items from the Not done collection into the Done collection
2. Observe that while the value of item.isDone changes (moving the item from one list to the other), the conditional CSS class task-done is not applied while the in or out animations play in the corresponding lists

What is expected?

I would expect the items to have the task-done class applied or removed immediately, then animate out of the list.

What is actually happening?

The CSS class is never applied as long as the item is still in the previous list.

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor         
    Memory: 15.16 GB / 31.92 GB
  Binaries:
    Node: 20.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 127.0.6533.120
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vue: ^3.4.29 => 3.4.31

Any additional comments?

Maybe that's expected behavior, but I didn't find any info on it while consulting the docs. If there is a workaround to apply CSS classes immediately, that'd be great.

[edison1105]

a workaround but not vue' style.

[PhilippChEnBW]

Thanks a lot for the workaround :) Still interested in whether that's expected behaviour or a bug though.

[edison1105]

Thanks a lot for the workaround :) Still interested in whether that's expected behaviour or a bug though.

I think this is expected behavior. aligin with vue2.