0

我正在尝试播放具有退出属性的组件卸载动画，但尽管存在！

输入动画效果很好，但不是输出动画！

我想我在卸载我的描述时管理不善，如果道具 data.show 为真，布尔值，我在单击项目时更改，简而言之，如果有人可以指出我...

密码箱

提前致谢

4

1 回答 1

0

您的代码中有很多问题需要解决，建议您首先了解re-renderingReact 中的触发器。

通过在每次更改 prop 数据时创建一个新的 uuid 键，你破坏了 React 知道哪些组件需要再次渲染以便重新渲染它们的能力 - 所以它始终是一个新实例AnimatePresence，无法AnimatePresence知道钥匙发生了变化或安装发生了变化。在将函数传递给子组件时，还要使用useCallback钩子以避免重新渲染。

将状态向上移动到父级，将卡片键更新为渲染之间的一致值，并且不要仅仅为了展开/折叠而更新整个道具数据。

查看更新的沙箱

我建议您不要像这样在同一空间内为多个内联项目设置动画，因为您总是会让剩余的框跳一点，但这是另一个话题。

于 2021-03-13T01:51:26.837 回答