javascript - 什么是对列表重新排序进行动画处理的 react.js 友好方式？

Question

我有一个带有分数的元素列表，按分数排序，由 react.js 呈现为垂直方向的矩形元素列表(最高分数在顶部)。在单个元素上悬停和其他点击可能会显示/隐藏额外信息，从而改变它们的垂直高度。

新信息的到来会稍微改变分数，使一些元素在重新排序后排名更高，而另一些则更低。我希望这些元素同时动画到它们的新位置，而不是立即出现在它们的新位置。

在 React.js 中是否有推荐的方法来执行此操作，也许使用流行的附加组件？

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

1. 按自然顺序显示元素 DOM 节点列表，并进行相对定位。通过相对定位，其他小的变化(CSS 或 JS 触发)对单个元素的范围会按预期转移其他元素。
2. 在一个步骤中改变所有 DOM 节点，将它们的实际相对坐标作为新的绝对坐标——DOM 变化不会导致视觉变化。
3. 将元素 DOM 节点在其父级中重新排序为新的排序顺序——另一个不会导致视觉变化的 DOM 更改。
4. 根据新排序中所有前面元素的高度，将所有节点的顶部偏移动画化为其新的计算值。这是唯一的视觉活跃步骤。
5. 将所有元素 DOM 节点变回非偏移相对定位。同样，这不会导致视觉上的变化，但现在相对定位的 DOM 节点，按照底层列表的自然顺序，将通过适当的移动处理内部悬停/展开/等样式变化。

现在我希望以类似 React 的方式获得类似的效果...)

Answer 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