小编典典

什么是react.js友好的方法来对列表进行重新排序?

reactjs

我有一个带有分数的项目列表,按分数排序,由react.js呈现为垂直方向的矩形项目列表(最高分数在顶部)。将鼠标悬停在单个项目上或其他单击可能会显示/隐藏其他信息,从而更改其垂直高度。

新信息的到来改变了分数,使某些物品在重新排序后排名较高,而另一些排名较低。我希望这些项目同时为它们的新位置 设置动画 ,而不是立即出现在其新位置。

在React.js中是否有推荐的方法可以做到这一点,也许还有一个流行的插件?

(在过去类似的情况下,使用D3时,我使用的技术大致是:

  1. 以自然顺序显示具有项目DOM节点的列表,并具有相对位置。通过相对定位,其他细微更改(由CSS或JS触发)在单个项目的范围内可以按预期转移其他项目。
  2. 只需一步,即可对所有DOM节点进行突变,以将其实际相对坐标作为新的绝对坐标–不会引起视觉变化的DOM变化。
  3. 将项目DOM节点在其父级内重新排序为新的排序顺序–另一个DOM更改不会引起视觉变化。
  4. 根据新排序中所有先前项目的高度,使所有节点的顶部偏移动画化为其新的计算值。这是唯一的视觉激活步骤。
  5. 将所有项目DOM节点突变回非偏移相对位置。再次,这不会引起视觉上的变化,但是以基础列表的自然顺序现在定位的DOM节点将通过适当的移位来处理内部悬停/扩展/等样式更改。

现在我希望以一种类似React的方式实现类似的效果…)


阅读 392

收藏
2020-07-22

共1个答案

小编典典

我刚刚发布了一个模块来解决这个问题

https://github.com/joshwcomeau/react-flip-
move

它所做的一些事情与Magic Move / Shuffle有所不同:

  1. 它使用FLIP技术进行硬件加速的60FPS +动画
  2. 它提供了一些选项,可通过逐渐抵消延迟或持续时间来“人性化”洗牌
  3. 它可以优雅地处理中断,没有奇怪的故障影响
  4. 一堆其他简洁的东西,例如开始/结束回调

查看演示:

http://joshwcomeau.github.io/react-flip-
move/examples/#/shuffle

2020-07-22