Animate React 重新排列列表项

Question

我有一个 JSON 对象数组，用于呈现元素列表：

mydata.map(thing => {
  return <SomeComponent key={thing._id} />
});

每个呈现的项目都有 up/down 个箭头，例如，如果用户单击向上箭头，项目将在列表中向上移动。在后端，数组中的项目只是交换。

我怎样才能使这个过程具有动画效果，以便用户更容易看到他们操作的结果？我正在研究 react-motion，但它似乎基于修改 CSS/styles 起作用。我希望有一些东西可以使用 React 的 key 属性 来确定独特的元素并基于此处理移动。

有什么建议吗？

Answer 1

React-flip-move 是一个很棒的组件，它允许您为子组件设置动画。列表中也有一个示例动画翻转值。