在 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 }),

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

Simple animation with useTransition in react-spring

javascript

reactjs

react-spring