Reordered items (v-for) lose all their ongoing transitions when move up (but don't when they move down).

[orimay]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNVMlu2zAQ/ZUBL7IBr2h7UZ2iSZFDemiLtDfLB5kayYxpUuDiBYb/vUOKdly4DXqSOAvfm3lPOrL7th1tPbKczSw3onVg0fkWZKmau4I5W7BPhQIQm1YbB0cwWMMJaqM3kFFjVqiQ5lpZB8LhxsJdqOnNs/tskD1ki/7HrqT2ijuhFdiVr2uJvT4cQ5zuDm2jbSk9UvP86jifLgbX6flksaDrAE6Fmo07wkSPDlTTytJhJDtbTeMT4Bm1qdBglbj1tsNamz5IbRFKKcGtUBjQqtFCNeBMqawILC3sVqhgo7cItI7e0juotMpcF6e2Q5es9E71RxF1nGBnbUJ/quGgPXAp+Dq0QC1MWlMYC3aCGNRlRYmwz0DTaWgMEkKEiQVL5HqDpAstuUpIHcK/gWR5g6O0+2+syPNPqEps4XMEIFskCZM3UjaulpIBFoTqNl4wyNd4SGE6caJmL8fUTwaK1An6eIyNcCKJ49VjurujkN5m4yux6WjdQXa6j2JnclVbVhVpmsN00u6jaQCWJV83RntVDbmW2uTdAlL2Vf38phI+TCbkHywtDoUaau9Sk7dohhYlcpfTjhWmOPfGBoCWjOXQnF2bSOYr8o45U72lRfJc+TwNyAb0PZIJatGMXqxW9NHGCwpGorVCovneRu8WLD9fXTByud59jTFnPA7Ocb5Cvv5L/MXuQ6xgPwzSbFtS+ZJzpWnQdenHn99wT++X5EZXPnjijeQzWi194NiVPdDIRPuqLrJ9ij8bEu+Xfdw7JFHSUIFoXEusLxj9gL68Mfor3Xej92mdJ3b6DVTqpjA=

Steps to reproduce

Make a v-for list of items, that have ongoing transitions, then reorder them

What is expected?

When we have a v-for with items that have an ongoing transition, and they reorder, all of the items should maintain their ongoing transitions, regardless of their moving directions

What is actually happening?

When we have a v-for with items that have an ongoing transition, and they reorder, only the items that move down maintain their transitions

System Info

Any additional comments?

This affects all the transitions, no matter how deep they are

[orimay]

Also happens in vapor mode:
https://vapor-repl.netlify.app/#eNqNVMlu2zAQ/ZUBL7IBr2h7UZ2iSZFDemiLtDfLB5kayYxpUuDiBYb/vUOKdly4DXqSOAvfm3lPOrL7th1tPbKczSw3onVg0fkWZKmau4I5W7BPhQIQm1YbB0cwWMMJaqM3kFFjVqiQ5lpZB8LhxsJdqOnNs/tskD1ki/7HrqT2ijuhFdiVr2uJvT4cQ5zuDm2jbSk9UvP86jifLgbX6flksaDrAE6Fmo07wkSPDlTTytJhJDtbTeMT4Bm1qdBglbj1tsNamz5IbRFKKcGtUBjQqtFCNeBMqawILC3sVqhgo7cItI7e0juotMpcF6e2Q5es9E71RxF1nGBnbUJ/quGgPXAp+Dq0QC1MWlMYC3aCGNRlRYmwz0DTaWgMEkKEiQVL5HqDpAstuUpIHcK/gWR5g6O0+2+syPNPqEps4XMEIFskCZM3UjaulpIBFoTqNl4wyNd4SGE6caJmL8fUTwaK1An6eIyNcCKJ49VjurujkN5m4yux6WjdQXa6j2JnclVbVhVpmsN00u6jaQCWJV83RntVDbmW2uTdAlL2Vf38phI+TCbkHywtDoUaau9Sk7dohhYlcpfTjhWmOPfGBoCWjOXQnF2bSOYr8o45U72lRfJc+TwNyAb0PZIJatGMXqxW9NHGCwpGorVCovneRu8WLD9fXTByud59jTFnPA7Ocb5Cvv5L/MXuQ6xgPwzSbFtS+ZJzpWnQdenHn99wT++X5EZXPnjijeQzWi194NiVPdDIRPuqLrJ9ij8bEu+Xfdw7JFHSUIFoXEusLxj9gL68Mfor3Xej92mdJ3b6DVTqpjA=

[edison1105]

This seems to be the browser's behavior, see MDN playground

[Justineo]

Chrome has recently introduced a new DOM API, moveBefore, as a drop-in replacement for insertBefore that better preserves element state.

We could consider using moveBefore as a progressive enhancement where supported. It helps maintain:

• Focus
• Animation and transition states
• Video playback state
• ...

[orimay]

But it also happens on Firefox (which doesn't have moveBefore). Though Chrome is my main concern. Could we have moveBefore instead of insertBefore, if it exists?

[orimay]

Chrome has recently introduced a new DOM API, moveBefore, as a drop-in replacement for insertBefore that better preserves element state.

We could consider using moveBefore as a progressive enhancement where supported. It helps maintain:

* Focus

* Animation and transition states

* Video playback state

* ...

Awesome, thank you! Here's my solution for the time being