我有一个带分数的项目列表,按分数排序,由react.js呈现为垂直方向的矩形项目列表(顶部最高分).对各个项目进行悬停和其他点击可能会显示/隐藏额外信息,从而更改其垂直高度.
新信息到达时会略微改变分数,使得某些项目在重新排序后排名更高,而其他项目则更低.我希望这些项目可以同时动画到新的位置,而不是立即出现在新的位置.
是否有推荐的方法在React.js中执行此操作,也许使用流行的附加组件？
(在使用D3的类似过去的情况下,我使用的技术大致是:
- 以自然顺序显示具有项目DOM节点的列表,具有相对定位.通过相对定位,其他小的变化 - CSS或JS触发 - 对个别项目的程度会按预期转移其他项目.
- 在一个步骤中改变所有DOM节点,使其实际相对坐标成为新的绝对坐标 - 不会导致视觉变化的DOM更改.
- 将其父项中的DOM节点重新排序为新的排序顺序 - 另一个不会导致视觉变化的DOM更改.
- 根据新排序中所有前面项目的高度,将所有节点的顶部偏移设置为其新计算值.这是唯一视觉活跃的步骤.
- 将所有项DOM节点变回非偏移相对定位.同样,这不会导致视觉上的变化,但是现在相对定位的DOM节点,在底层列表的自然顺序中,将通过适当的移位来处理内部悬停/扩展/等样式更改.
现在我希望以React-ish的方式产生类似的效果...)