未安装组件上的 Framer-motion 退出动画
Framer-motion exit animation on unmounted component
我试图在卸载具有 exit 属性的组件时播放动画，但尽管存在 !
但它不起作用
输入动画工作正常但输出动画不工作！
我想我对我的描述的卸载管理不当，如果道具 data.show 为真，我在点击项目时更改的布尔值，简而言之，如果有人可以指出我的话。 .
提前致谢
您的代码中有很多问题需要解决，建议您首先了解什么会触发 React re-rendering。
通过在每次更改道具数据时创建一个新的 uuid 键，您破坏了 React 知道哪些组件需要再次渲染的能力，因此它会重新渲染它们——所以它总是 AnimatePresence 并且 AnimatePresence 无法知道密钥发生了变化或安装发生了变化。在将函数传递给子组件时也使用 useCallback 钩子以避免重新渲染。
将状态向上移动到父级，将卡键更新为渲染之间的一致值，并且不要将整个道具数据更新为 expand/collapse。
查看更新后的 sandbox
我建议您不要像这样在同一个 space 内对多个项目进行动画处理，因为您总是会让剩余的框跳动一点，但这是另一个话题。
我试图在卸载具有 exit 属性的组件时播放动画，但尽管存在 !
但它不起作用输入动画工作正常但输出动画不工作！
我想我对我的描述的卸载管理不当，如果道具 data.show 为真，我在点击项目时更改的布尔值，简而言之，如果有人可以指出我的话。 .
提前致谢
您的代码中有很多问题需要解决，建议您首先了解什么会触发 React re-rendering。
通过在每次更改道具数据时创建一个新的 uuid 键，您破坏了 React 知道哪些组件需要再次渲染的能力，因此它会重新渲染它们——所以它总是 AnimatePresence 并且 AnimatePresence 无法知道密钥发生了变化或安装发生了变化。在将函数传递给子组件时也使用 useCallback 钩子以避免重新渲染。
将状态向上移动到父级，将卡键更新为渲染之间的一致值，并且不要将整个道具数据更新为 expand/collapse。
查看更新后的 sandbox
我建议您不要像这样在同一个 space 内对多个项目进行动画处理，因为您总是会让剩余的框跳动一点，但这是另一个话题。