我有一个带有分数的项目列表,按分数排序,由react.js呈现为垂直方向的矩形项目列表(最高分数在顶部)。将鼠标悬停在单个项目上或其他单击可能会显示/隐藏其他信息,从而更改其垂直高度。
新信息的到来改变了分数,使某些物品在重新排序后排名较高,而另一些排名较低。我希望这些项目同时为它们的新位置 设置动画 ,而不是立即出现在其新位置。
在React.js中是否有推荐的方法可以做到这一点,也许还有一个流行的插件?
(在过去类似的情况下,使用D3时,我使用的技术大致是:
现在我希望以一种类似React的方式实现类似的效果…)
我刚刚发布了一个模块来解决这个问题
https://github.com/joshwcomeau/react-flip- move
它所做的一些事情与Magic Move / Shuffle有所不同:
查看演示:
http://joshwcomeau.github.io/react-flip- move/examples/#/shuffle