react-spring 相当于 react-pose PoseGroup

Question

React Pose PoseGroup 仅在使用 flipMove 选项更改列表时为列表元素设置动画

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

如何使用 react-spring?

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

如果某个项目被删除，我想为列表添加动画效果，并且动画会平滑地填补空白

Answer 1

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

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

  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>

最后是示例，我添加了一个添加随机播放按钮。 https://codesandbox.io/s/react-spring-position-animation-di9rb

react-spring 相当于 react-pose PoseGroup

react-spring equivalent of react-pose PoseGroup

reactjs

react-spring

react-pose