TransitionGroup not firing v-move at array.push

[aakudinov28]

Hello everyone. Sorry for my bad English, I'm using a translator.

I'm trying to create a toasts component for Vue 3. The key is that I need new elements to be at the bottom, and older elements to fade upward when a new element is added. The entire component is positioned at the bottom left.

The problem is that v-move only starts working when the list overflows and older toasts are deleted.

As I understand it, when adding an element, I call list.push(), which doesn't change the position of the other elements but simply adds the new element to the end, so v-move doesn't work.

I'm already racking my brain trying to implement this. I've tried display flex and scaleY. Nothing works. Please help.

Link to the playground: https://play.vuejs.org/#eNqFVMlu2zAQ/ZWBcrCC2LLTtBfVMdAWQZECXdDmVvXASCOZCUUSJOUkMPTvHZHaGhTJReC82d68IXWMPmidHBqM0mhrc8O1A4uu0btMAvBaK+PgCAbLJSj5VTXSYQEtlEbVsKC8RSa7yFxJ60Bw+lx20fHvP6cdLtABLwjbhLiykbnjSgIritg9aVyCw0d3CsfOSx3LuCuSHJhoMBEoK7eHHVyMAVRy8lsteI7xZgnnvhtAG9qExk4xz2dM5cVyOPreo0EUnudPXXRj97GvRU16msXZWXfqw0dl4vgULndDQxLymlBDZf51gB9/gcYos1jC4gaJZ43WsgoXwyQ01Gaz8VZL3+06rIcWQ4bDWgvm0K9pe2OYtLzT9bNRjQbJarzMIs/ZZhE4VpFZ8AOdeTHz+HQqQC7IBbN28FHgYVUqM9jApZeE8PQenwY44QUVOR6D1EmnI7QtnIwI7b5tt2uqH5iun1EldLueDUOmdU8izHUSaA6qaRUSU2C3VonG4fvguFXOqTqFC4N1Dwks3Qzo9zQU3EESpuor18xUXK6c0ikk76YqmtbEZZXC+Rx94IXbEzaDciWUSeFhzydSLL+vaERZpHAryJgTCe3tSiA74IrRkzjgK2M+y6zVlOFGTYn+GwtMCEBmcUUzqcbfbMqmC+SVjZaRs/ReS14ld1ZJevm+ThblqtZcoPmuu1p0PdKhQxZRTfXwxWPONMPToZw95vf/we/sY4dl0Q+Dlp4AZtHocyQ30lXq3Fe/vnWPb3LWqmgERb/g/IleF+IYwj6SyER7FufZXvu/F+3vxl49OiSJ+qE6ol4UH59F9Bv79MLoE92L5G0vZhu1fwF/6rPz

[edison1105]

like this ?

[aakudinov28]

like this ?

No, the result is the same. Look at how the transition animation works when the first four elements appear (the older ones jump up), and how it works for the fifth and subsequent elements (they smoothly move up).

[aakudinov28]

No ideas? :(

[skirtles-code]

If I set the Vue version to 3.5.22 in the Playground it seems to work correctly. This seems to be a regression in 3.5.23.

[aakudinov28]

Thank you very much. I remember successfully completing this task before. I was starting to doubt myself. It looks like I'll have to roll back to version 3.5.22 and wait for a fix.

[aniruddhaadak80]

Hello @aakudinov28,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!