什么是react.js友好的方式来动画列表重排序？ [英] What's a react.js-friendly way to animate a list-reordering?

问题描述

我有一个项目列表，分数，按分数排序，由react.js作为一个垂直方向的矩形项目列表（顶部的最高分数）。

I have a list of items with scores, ordered by scores, rendered by react.js as a vertically-oriented list of rectangular items (highest scores at top). Hovers and other clicks on the individual items may show/hide extra info, changing their vertical height.

新信息会更改分数，略微增加，使某些项目排名更高和其他人在重新排序后降低。我想让这些项目同时动画到新位置，而不是立即显示在新位置。

New information arrives that changes the scores, slightly, making some items rank higher and others lower after a re-sort. I'd like the items to simultaneously animate to their new positions, rather than appear in their new locations instantly.

在React.js中有一个推荐的方法可以使用热门的加载项吗？

Is there a recommended way to do this in React.js, perhaps with a popular add-on?

（在使用D3的类似过去​​情况下，我使用的一种技术大致是：

(In a similar past situation using D3, a technique I've used was roughly:

1. 在项目DOM节点中显示列表使用相对定位，相对定位，其他小变化 - CSS或JS触发 - 到单个项目的范围移动其他预期。


2. 变化所有的DOM节点，在


3. 将其父项内的DOM节点重新排序为新的DOM节点


4. 根据新排序中所有前面项目的高度，将所有节点的顶部偏移设置为新的计算值。是唯一的视觉上活跃的步骤。


5. 将所有项目DOM节点变回到非偏移相对定位。同样，这不会导致视觉变化，但是现在相对定位的DOM节点在底层列表的自然排序中将通过适当的移位来处理内部hover / expand / etc风格变化。

1. Display the list with item DOM nodes in their natural order, with relative positioning. With relative positioning, other small changes – CSS or JS-triggered – to individual items' extent shift others as expected.
2. Mutate all the DOM nodes, in a single step, to have their actual relative-coordinates as new absolute coordinates – a DOM change that causes no visual change.
3. Re-order the item DOM nodes, within their parent, to the new sort order – another DOM change that causes no visual change.
4. Animate all nodes' top-offsets to their new calculated values, based on the heights of all preceding items in the new ordering. This is the only visually-active step.
5. Mutate all item DOM nodes back to non-offset relative-positioning. Again, this causes no visual change, but the now-relatively-positioned DOM nodes, in the natural ordering of the underlying list, will handle internal hover/expand/etc style changes with proper shifting.

现在我希望在React-ish方法中有类似的效果...）

Now I'm hoping for a similar effect in a React-ish way...)

推荐答案

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

I just released a module to tackle exactly this problem

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

它有一些不同于Magic Move / Shuffle

It does a few things differently than Magic Move / Shuffle:

1. 它使用FLIP技术硬件加速60FPS +动画


2. 通过递增偏移延迟或持续时间来实现随机播放。


3. 优雅地处理中断，没有奇怪的毛刺效应


4. 回调

1. It uses the FLIP technique for hardware-accelerated 60FPS+ animations
2. It offers options to "humanize" the shuffle by incrementally offsetting delay or duration
3. It handles interruptions gracefully, no weird glitch effects
4. Bunch of other neat stuff like start/finish callbacks

查看演示：

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

这篇关于什么是react.js友好的方式来动画列表重排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！