如何动画化两个数组元素之间的转换

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"));

奖金也将用于动画颜色。

Answer 1

我们目前找到了两种解决方法：

将两个 For-s 组合成一个索引，以呈现组合数组 - 防止现有元素在 dom 中切换它们的位置。并根据指数计算出它们的实际价值。

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

利用 TransitionGroup 和 For。这样 TransitionGroup 就可以处理在数组中切换位置的元素。

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

尽管这两种方法都依赖于仅使用一个控制流组件。

如何动画化两个数组元素之间的转换

How to animate translate between elements of two arrays

typescript

solid-js