Search code examples
reactjsreact-spring

How do I smoothly delete an element from an array with react-spring?

Made animated deletion and the emergence of elements of the array. But I don't know how to make a smooth collapse of elements when removing one of them. Here is a simple example on sandbox.

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

Solution

  • The easiest way of the "smmoth collapse" is to change the width of the divs.

      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
    }
  });