How to animate translate between elements of two arrays

Question

function Counter() {
  const [list1, setList1] = createSignal([1, 2, 3, 4, 5]);
  const [list2, setList2] = createSignal([6, 7, 8, 9, 10]);
  
  setTimeout(() => {
      setList1([1, 2, 3, 4, 5, 8, 9, 10])
      setList2([6, 7])
  }, 1000)

  return (<>
    <div>
    <For each={list1()}>{ (item, i) => 
       <span style={`position: absolute; color: blue; transform: translate(${i()}em, 0)`}>{item}</span>
    }</For>
    <For each={list2()}>{ (item, i) =>
       <span style={`position: absolute; color: red; transform: translate(${i()}em, 2em)`}>{item}</span>
    }</For>
    </div>
    </>)
}

render(() => <Counter />, document.getElementById("app"));

Bonus would be for animating the color too.

Answer 1

We have found two ways of solving that currently:

1. Combining two For-s to one Index that would render the combined array - preventing existing elements to switch their position in the dom. And calculating their actual value based on the index.

link: https://playground.solidjs.com/?hash=562431964&version=1.3.16

2. Utilising the TransitionGroup with For. So that TransitionGroup can take care of elements that switch their position in array.

link: https://playground.solidjs.com/?hash=-283765756&version=1.3.16

Both methods rely on using only one Control Flow component though.