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

Question

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

Hi Vova. Please paste code into the question. https://stackoverflow.com/help/minimal-reproducible-example — greenmarker, Jun 27 '20 at 11:53

score 2 · Accepted Answer · answered Jun 27 '20 at 07:11

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

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

1 Answers1