Animate React重新排列列表项

时间:2016-06-04 10:22:12

标签: javascript animation reactjs react-motion

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

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

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

如何让这个过程具有动画效果,以便用户更容易看到他们的动作结果是什么?我正在调查react-motion,但它似乎基于修改CSS /样式。我希望会有一些东西使用React的key属性来确定独特元素并根据它来处理移动。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

React-flip-move是一个很棒的组件,可让您为儿童组件制作动画。还有一个示例动画在列表中翻转值。