I have a keyed each block of elements that are positioned with CSS transforms into a grid. When I swap the position of the elements in the array, the order of the elements changes in the DOM. But they don't animate into their new spots (except for when you click on the second element, which only animates one way), despite have a CSS transition on the transform property set. Here is a repl:
https://svelte.dev/repl/3a53c81c3f4546f1bd3a879f51f87c76?version=3.42.1
I know there are other ways to place and move elements in a grid in Svelte, like css grid, flexbox and the animate + transition directives. But I'm specifically interested in the method used in the repl: CSS transforms with CSS transitions.
Looks like under the hood, Svelte is creating the 4 divs in a static order and changing their hue values and content, rather than their translation CSS since this is getting updated based on the index of the current item. You can see this if you pull up the DevTools and watch how the divs are updated as you click.
To ensure the list divs re-render the way you want them to (static order, content, hue, just translation changes) I would recommend generating the translation CSS value based on something fixed in each item object, like an order property. Then instead of re-ordering the list item, you can just change the order property as needed.
Working example: https://svelte.dev/repl/9c8a1b7f69e14a958bf66b50989ebc72?version=3.42.1