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

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

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

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

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

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

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

gojomo asked 2020-07-10T00:54:28Z
7个解决方案
39 votes

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

[HTTPS://GitHub.com/Josh问come AU/react-飞利浦-move]

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

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

查看演示:

[HTTP://Josh问come AU.GitHub.IO/react-飞利浦-move/examples/#/shuffle]

Joshua Comeau answered 2020-07-10T00:55:13Z
9 votes

React Shuffle是可靠且最新的。 它的灵感来自Ryan Florences的Magic Move演示

[HTTPS://GitHub.com/formidable labs/react-shuffle]

Tim Arney answered 2020-07-10T00:55:38Z
9 votes

我意识到这是一个古老的问题,您现在可能已经找到了解决方案,但是对于其他遇到此问题的人,请查看Ryan Florence的MagicMove库。 它是一个React库来处理您描述的确切场景:[https://github.com/ryanflorence/react-magic-move]

实际观看:[https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424]

编辑:这在React 0.14中被破坏了。 如下面的Tim Arney所建议的,请参阅React Shuffle作为替代方案。

Andru answered 2020-07-10T00:56:07Z
3 votes

我可以想到的最好的方法就是首先确保您为每个元素都赋予了一个密钥,如下所述:

[HTTP://Facebook.GitHub.IO/react/docs/multiple-components.HTML#dynamic-children]

接下来,我将定义类似于以下内容的CSS3动画:

用CSS3制作列表动画

基本上,在您的render函数中,您将计算元素的预定位置,ReactJS会将元素放置在假定的位置(请确保每次都为每个元素赋予相同的键!这对于确保ReactJS重用DOM元素非常重要。 正确地)。 至少从理论上讲,CSS应该在reactjs / javascript之外为您处理其余的动画。

免责声明...我从来没有真正尝试过;)

Chris answered 2020-07-10T00:56:49Z
1 votes

我不想为动画使用第三方库,所以我使用React生命周期方法getSnapshotBeforeUpdate()和componentDidUpdate()实现了“ FLIP”动画技术。

当列表项的props.index更改时,旧位置被捕获在getSnapshotBeforeUpdate()和componentDidUpdate()中,将应用css转换:translateY(),以便该项目看起来像是从旧位置向当前位置移动。

.animate-on-transforms {
  /* animate list item reorder */
  transition: transform 300ms ease;
}
.animate-on-transforms {
  /* animate list item reorder */
  transition: transform 300ms ease;
}

Boog answered 2020-07-10T00:57:14Z
0 votes

因为元素的位置在很大程度上取决于DOM引擎,所以我发现在React组件中以纯净的方式实现补间和动画非常困难。 如果您想干净地做它,我认为您至少需要:一个Store来保存元素的当前位置,一个Store来保存元素的下一个位置(或与先前的存储结合),以及render( )方法,将每个元素的偏移边距应用到最后一帧中的下一个位置变为当前位置。 首先如何计算下一个位置也是一个挑战。 但是鉴于这些元素仅交换位置,您可以使用当前位置的商店将元素#0与元素#1交换,方法是在下一个位置商店中交换它们的偏移量。

最后,在渲染元素之后,仅使用外部库更容易操纵它们的边距。

Rygu answered 2020-07-10T00:57:39Z
-3 votes

只需使用ReactCSSTransitionGroup。它内置在React with Addons包中,非常适合此用例! 只需确保要在其上应用转换的组件已安装到DOM。 使用链接示例中的CSS可以很好地进行渐变。

Jessie Schalles answered 2020-07-10T00:58:00Z
translate from https://stackoverflow.com:/questions/27198479/whats-a-react-js-friendly-way-to-animate-a-list-reordering