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).