javascript - Animate React 重新排列列表项

Question

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

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

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

如何使该过程具有动画效果，以便用户更容易看到其操作的结果是什么？我正在调查react-motion ，但它似乎是基于修改 CSS/样式来工作的。我希望有一些东西可以使用 React 的 key 属性来确定唯一元素并据此处理移动。

有什么建议吗？

Answer 1

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