react-spring中使用useTransition的简单动画

Question

我有一个关于useTransition 的非常简单的例子，我的期望是每当我点击shuffle 按钮时，下面的项目都会通过流畅的动画来交换。但我不工作，该项目确实交换了pos 属性。我认为我对useTransition 中的key 的理解有问题，但我找不到。

我当前的代码：https://codesandbox.io/s/wonderful-solomon-c0sve?file=/src/index.jsx

我想要做的是this

function App() {

  const [items, setState] = useState([
    { name: 'C' },
    { name: 'D' },
    { name: 'E' },
    { name: 'F' },
    { name: 'G' },
    { name: 'A' },
    { name: 'B' },
  ]);

  let index = -1;
  const gridItems = items.map((item) => {
    index += 1;
    return { ...item, pos: index * 60 };
  });

  const transitions = useTransition(gridItems, item => item.name, {
    from: () => ({ pos: -100 }),
    enter: ({ pos }) => ({ pos }),
    udpate: ({ pos }) => ({ pos }),
    leave: () => ({ pos: -100 }),
  });

  return (
    <div>
      This is app<br/>
      <button onClick={ () => setState(Lodash.shuffle) }>shuffle</button><br/><br/>
      <div>
        {transitions.map(({ item, props, key }) => {
          return (
            <animated.div
              key={key}
              className="item"
              style={{ transform: props.pos.interpolate(pos => `translateY(${pos}px)`) }}
            >
              {`${item.name}`}
            </animated.div>
          )
        })}
      </div>
    </div>
  )
}

Answer 1

这是一个弄清楚它的时代。你打错字了。 试试这个：

update: ({ pos }) => ({ pos }),