如何使用 react-spring 从数组中顺利删除元素？

Question

制作动画删除和数组元素的出现。但是我不知道如何在删除其中一个元素时平滑地折叠元素。这是沙盒上的一个简单示例。

https://codesandbox.io/s/throbbing-night-ytj1r?file=/src/App.js

Answer 1

“平滑折叠”的最简单方法是更改​​ div 的宽度。

  const transBoxes = useTransition(boxes, boxes => boxes, {
    from: { opacity: 0, transform: "translateY(-100px)", width: '100px' },
    enter: { opacity: 1, transform: "translateY(0px)" },
    leave: { opacity: 0, transform: "translateY(100px)", width: '0px' },
    config: {
      duration: 750
    }
  });