React-Spring useTransition 将我的列表项打乱

Posted 2023-03-07

【中文标题】React-Spring useTransition 将我的列表项打乱

【英文标题】：React-Spring useTransition shuffles my list items around

【发布时间】：2019-10-29 11:27:45

【问题描述】：

我有一个使用 React-Spring 转换渲染的标签列表。 这个想法是您可以添加项目，如果您有超过 5 个项目，则会出现一个“显示更多”按钮。按此按钮可切换您是显示所有标签还是仅显示前五个标签。

问题是当我从“显示更多”转到“显示更少”时。我注意到在我的项目被隐藏之前，除了第一个项目之外，所有项目都移动到列表的开头，产生了一种奇怪的效果，你可以看到第一个标签改变了它们的文本并消失，然后离开最后一个标签（第一个标签' 文本）。

我附上了一个小沙盒来重现这个问题。它有 10 个项目，您可以打开和关闭它，但它重现了这个奇怪的错误：https://codesandbox.io/s/thirsty-mountain-ut3r9

有什么解决办法吗？

【问题讨论】：

你的两个转换首先让我感到困惑。但我现在看到只有一个是计数的。我尝试了很多事情都没有成功。我使用 useRef 实现的所有功能都使第一个节点保留在动画中。我也不明白。 codesandbox.io/s/focused-goldberg-6q9zi，如果你到了，请发布解决方案。

【参考方案1】：

终于有了。如果您将 react-spring 版本升级到 9 beta 并从转换中删除重置，它会按预期工作。

https://codesandbox.io/s/adoring-tu-yypii

【讨论】：

太好了！非常感谢！