什么是一个react.js友好的方式来animation列表重新sorting？
我有一个项目列表，按分数sorting，由react.js呈现为垂直方向的矩形项目列表（最高分）。 对单个项目的盘旋和其他点击可以显示/隐藏额外的信息，改变它们的垂直高度。
新的信息到达，稍微改变分数，使得一些项目在重新sorting之后排名更高，而其他更低。 我希望这些物品能够同时生成新的位置，而不是立即出现在新的位置。
在React.js中是否有推荐的方法来做到这一点，也许有一个stream行的附加？
（在使用D3的类似的过去的情况下，我使用的技术大致是：
- 按照自然顺序显示具有项目DOM节点的列表，并进行相对定位。 在相对定位的情况下，其他小的变化 – CSS或JS触发 – 个别项目的范围将按预期转移其他人。
- 在一个步骤中，使所有的DOM节点都变为实际的相对坐标作为新的绝对坐标 – 一个DOM变化，不会引起视觉变化。
- 在其父代中，将项目DOM节点重新sorting为新的sorting顺序 – 另一个DOM更改不会导致可视的更改。
- 根据新sorting中所有前面项目的高度，将所有节点的顶部偏移量animation到新的计算值。 这是唯一直观的步骤。
- 将所有项目的DOM节点变回无偏移的相对定位。 同样，这不会导致视觉上的改变，但是现在相对定位的DOM节点，在底层列表的自然顺序中，将通过适当的移位来处理内部hover/展开/ etc样式的改变。
现在我希望以React-ish的方式获得类似的效果…）
我刚刚发布了一个模块来解决这个问题
https://github.com/joshwcomeau/react-flip-move
它和Magic Move / Shuffle有一些不同之处：
- 它使用FLIP技术进行硬件加速的60FPS +animation
- 它提供了通过递增地抵消延迟或持续时间来“人性化”洗牌的选项
- 它优雅地处理中断，没有奇怪的小故障的影响
- 一堆其他整齐的东西，如开始/结束callback
看看演示：
http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle
反应洗牌是坚实的，最新的。 它的灵感来自Ryan Florences Magic Move演示
我意识到这是一个老问题，你现在可能已经find了一个解决scheme，但是对于所有遇到这个问题的人来说，请查看Ryan Florence的MagicMove库。 这是一个React库来处理你描述的确切情况： https ： //github.com/ryanflorence/react-magic-move
查看它的行动： https : //www.youtube.com/watch?v=z5e7kWSHWTg#t=424
编辑：这是在反应0.14中被打破。 正如Tim Arney所build议的，请参阅React Shuffle作为替代scheme。
我能想到的最好的方法是首先确保你给每一个元素一个关键点，如下所述：
http://facebook.github.io/react/docs/multiple-components.html#dynamic-children
接下来我将定义类似如下的CSS3animation：
用CSS3animation列表
基本上在你的渲染函数中，你可以计算出元素所在的位置，ReactJS会把元素放在它想要的位置（确保每次给每个元素使用相同的键值，这对确保ReactJS重用DOM元素很重要正确）。 至less在理论上，CSS应该在reactjs / javascript之外为您处理剩下的animation。
Disclamer …我从来没有尝试过这个;）
因为元素的位置很大程度上依赖于DOM引擎，所以我发现在React组件中以纯粹的方式实现补间和animation是非常困难的。 如果你想干净地做，我认为你至less需要：一个商店来保存一个元素的当前位置，一个商店来保存一个元素的下一个位置（或者把它和前面的商店结合起来）和一个渲染器）方法应用每个元素的偏移量，直到最后一帧，下一个位置变成当前。 如何计算下一个职位也是一个挑战。 但是考虑到元素只是交换位置，您可以使用当前位置的Store与元素＃1交换元素＃0，通过交换下一个位置Store中的偏移量。
最后，使用外部库来处理渲染后的元素边距会更容易。
只需使用ReactCSSTransitionGroup 。 它内置于React with Addons软件包中，非常适合这种用例！ 只要确保应用了转换的组件已经安装到DOM。 使用链接示例中的CSS进行良好的衰落过渡。
