Как сделать плавное удаление элемента массива с framer-motion?

Question

[vovashaplin]

Сделал анимацию удаления из массива, но она работает некорректно. Показывает анимацию удаления именно последнего элемента.
Вот сделал простой макет, для удобства просмотра.
https://codesandbox.io/s/awesome-edison-75p4t?file...
Также хотелось бы реализовать плавное замещение удаленного элемента, а не просто безанимированный сдвиг.

Answer 1

[hzzzzl]

вышло так, добавил таймаут в Box, чтобы успевало отанимироваться перед удалением
https://codesandbox.io/s/angry-payne-j0nhi

Показывает анимацию удаления именно последнего элемента

потому что здесь key=index смещался на один при удалении, был не "уникальным для блока", а зависел от позиции в массиве

{boxes.map((item, index) => (
  <Box key={index} item={item} onDelete={onDelete} />
 ))}

Comments

[vovashaplin]

Спасибо большое, уже успел сделать это даже на реакт спринг. И есть еще один вопрос, как сделать, чтобы элементы не схлопывались при удалении, а например плавно съезжались друг к другу?

[AntonGre4ka]

vovashaplin, нашел решение?