React Pose PoseGroup просто анимирует элементы списка, когда список изменяется с опцией flipMove.
https://codesandbox.io/s/inspiring-herschel-37bvs
Как это сделать с помощью React-Spring?
{items.map(item => (
<Item key={item} />
))}
Я бы хотел анимировать список, если элемент удален, и анимация плавно заполняет пробел
В React-Spring анимация позиции немного сложнее, так как вам нужно манипулировать позициями как стилями. Мне нравится использовать анимацию на основе хуков, поэтому я преобразовал компонент в функцию. Лучший способ решить эту проблему - использовать функцию useTransition в react-spring. Вы можете определять, вводить и оставлять стили для него. И это будет применяться к каждому элементу массива по мере их удаления или добавления.
Для позиции мне нужна позиция y сначала как данные, а затем как свойство. Поэтому я отображаю индекс как y и представляю его реквизитам как переменную для интерполяции.
const [items, setItems] = React.useState([0, 1, 2, 3]);
const transitions = useTransition(
items.map((item, i) => ({ label: item, y: i })),
item => item.label,
{
from: { opacity: 0 },
leave: { opacity: 0 },
enter: ({ y }) => ({ y, opacity: 1 }),
update: ({ y }) => ({ y })
}
);
Затем вы можете использовать объект перехода в части рендеринга, чтобы сопоставить элементы со стилями из него. Уловка здесь в стиле трансформации. Теперь y изменяется в зависимости от порядка в массиве. Мы можем создать красивый стиль трансформации на его основе, чтобы перемещать элементы.
<ul className="sidepanel">
{transitions.map(({ item, props, key }, index) => (
<animated.li
style={{
position: "absolute",
opacity: props.opacity,
transform: props.y.interpolate(
y => `translate3d(0,${y * 40}px,0)`
)
}}
className="item"
data-key={item.label % 5}
key={key}
onClick={() => {
setItems([0, 1, 3]);
}}
/>
))}
</ul>
Наконец, в примере я добавил кнопку добавления в случайном порядке. https://codesandbox.io/s/react-spring-position-animation-di9rb
