虚拟列表中的（仅新的）元素的动画输入

Question

我正在使用react-window filestsizedlist和react-virtualized-auto-sizer autosizer autoSizer 组件构建list/list/list/list/表UI元素可能包含数千个项目，这些项目也通过WebSocket连接接收新项目并将其预先列入列表。我现在需要对此列表中的新元素的输入进行动画。

这是一个具有最小（并且不够有效的）示例的代码和框链接： noreflow noreferrer“> codesandbox 。

请注意，。还要注意。

我知道发生这种情况的原因是因为列表如何使用孩子行的绝对定位来实现虚拟化。每次将新项目插入数据或滚动列表时，react-window都需要重新计算每一行的样式 prop，从而重新创建每个DOM元素因此，重新启动.ROW动画。

我想仅动画新的

。

1. >到.ROW类。由于上述每个元素都在新项目插件上重新创建，因此这与上述相同的原因不起作用。
2. 仅动画第一行（示例使用代码沙箱中的红色背景）。虽然“有效”，但它并不十分合适。在我的生产站点中，不保证一次更新一次 - 可能同时插入多行。将所有新行添加到DOM时，都应将它们动画。可以通过在挂钩中立即插入两个UUID来在代码沙箱中复制这一点。
3. 不使用列表虚拟化。这当然可以正常工作，但不合适。在我的生产站点中，此列表可能包含数千个项目。
4. 阅读以前的问题。上一个问题的信息很少，没有最小的示例，也没有有用的答案或评论。此外，它已经超过5年了。

如何实现我在这里寻找的结果？

编辑：

我尝试了进一步的尝试，在2）上进行了延伸：

• 保存每个渲染项目的“旧”列表的副本。收到更新后，从新列表的长度中减去旧列表的长度（调用此号码n）。动画新列表的顶部n项目。此“有效”，但是生产系统具有一些复杂的解决方案，使该解决方案不足 - 每个列表项目都有ISO时间戳的日期，并且根据时间戳new -＆gt对列表进行排序；老的。通过WebSocket收到的更新还具有时间戳，，但不能保证新项目总是比当前列表的最新产品更新 - 在某些情况下，将新项目插入2、3或更远的位置列表。在这种情况下，基于长度更改的顶部n项目将不准确。

Answer 1

不知道对您来说有多昂贵，但是在每个状态更改上，一种做到这一点的方法是将特定的className添加到新的插入行和className已经插入的行。

因此，这样您就可以使用与新插入线相关的className处理。

类似的东西：

const mappedObject = (data, className) => {
  return {
    item: data,
    className
  };
};

React.useEffect(() => {
    const interval = setInterval(() => {
      const alreadyInsertedData = data.map((item) => {
        item.className = "already-inserted";

        return item;
      });

      setData((prev) => [
        mappedObject(uuidv4(), "first-insert"),
        mappedObject(uuidv4(), "first-insert"),
        mappedObject(uuidv4(), "first-insert"),
        ...alreadyInsertedData
      ]);
    }, 3000);

    return () => {
      clearTimeout(interval);
    };
  }, [setData, data]);

这是代码示例向您检查。

Answer 2

保存每个渲染项目的“旧”列表的副本。收到更新后，从新列表的长度（调用此号码n）中减去旧列表的长度。动画新列表的顶部n个项目。

如您所说，如果列表项目具有唯一的ID，则您只需要在每次更新时比较ID的更新，并对与这些添加或减少ID相对应的列表项进行动画。