react-spring等效于react-pose PoseGroup

Question

使用flipMove选项更改列表时，React Pose PoseGroup只会对列表元素进行动画处理

https://codesandbox.io/s/inspiring-herschel-37bvs

如何使用react-spring做到这一点？

{items.map(item => (
    <Item key={item} />
  ))}

如果一个项目被移除，我想要动画列表，并且动画平滑地填补空白

Answer 1

在react-spring中，为位置设置动画有点困难，因为您必须将位置作为样式进行操作。我喜欢使用基于钩子的动画，所以我将组件转换为函数。解决这个问题的最好方法是react-spring中的useTransition函数。您可以为其定义、输入和保留样式。当它们被移除或添加时，它将应用于每个数组项。

对于位置，我需要y位置首先作为数据，然后作为属性。因此，我将索引映射为y，并将其作为插值变量引入到props中。

  const [items, setItems] = React.useState([0, 1, 2, 3]);

  const transitions = useTransition(
    items.map((item, i) => ({ label: item, y: i })),
    item => item.label,
    {
      from: { opacity: 0 },
      leave: { opacity: 0 },
      enter: ({ y }) => ({ y, opacity: 1 }),
      update: ({ y }) => ({ y })
    }
  );

然后，您可以使用呈现部分中的转换对象来映射具有其中的样式的项。这里的诀窍是转换样式。Y现在会根据数组的顺序进行更改。我们可以在它的基础上创建一个很好的转换样式来移动项目。

  <ul className="sidepanel">
    {transitions.map(({ item, props, key }, index) => (
      <animated.li
        style={{
          position: "absolute",
          opacity: props.opacity,
          transform: props.y.interpolate(
            y => `translate3d(0,${y * 40}px,0)`
          )
        }}
        className="item"
        data-key={item.label % 5}
        key={key}
        onClick={() => {
          setItems([0, 1, 3]);
        }}
      />
    ))}
  </ul>

最后在示例中，我添加了一个add an shuffle按钮。https://codesandbox.io/s/react-spring-position-animation-di9rb