Как сделать плавное удаление элемента из массива с react-spring?

Question

[vovashaplin]

Сделал анимированное удаление и появление элементов массива. Но не знаю как сделать плавное схлопывание элементов, при удалении одного из них. Вот сделал простой пример на sandbox.
https://codesandbox.io/s/throbbing-night-ytj1r?fil...

Answer 1

[Алексей]

Например, так:

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

Comments

[vovashaplin]

Спасибо большое, а я писал width: '100px' )))