如何使用反应弹簧从数组中顺利删除元素?

Question

进行了动画删除和数组元素的出现。但是我不知道在删除其中一个元素时如何平滑折叠元素。下面是一个关于沙盒的简单示例。

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

Answer 1

"smmoth collapse"的最简单方法是更改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
}
});