Reactjs 为什么此弹簧动画在动画期间更改其边距顶部？

我有一个react-spring动画，包括在滑动时使组件出现。但在此动画期间，组件在恢复正常之前会更改其边距顶部。如何解决这个问题

以下是代码和沙盒：

import React，{useffect，usemo，useState}来自“React”；
从“样式化组件”导入样式化，{css，keyframes}；
从“react spring”导入{animated，useTransition}；
const Tabs=styled.div`
显示器：flex；
边缘底部：12px；
`;
const Tab=styled.button`
利润率：0.4px；
边框底部：1px实心透明；
字体大小：${（{active}）=>active&&600}；
光标：指针；
背景：透明；
边界：0；
&：焦点{
大纲：无！重要；
}
`;
导出默认函数收件箱（）{
const[tab，setTab]=useState（0）；
常量转换=使用转换（选项卡，（p）=>p{
from:{opacity:0，transform:“translate3d（100%，0,0）”}，
输入：{opacity:1，transform:“translate3d（0%，0,0）”}，
左：{opacity:0，transform:“translate3d（-50%，0,0）”}
});
const getList=（name:string）=>{name}；
常量页=[
（{style}）=>(
{getList（“测试1”）}
),
（{style}）=>(
{getList（“测试2”）}
)
];
返回(
setTab（0）}active={tab===0}>
未读
setTab（1）}active={tab===1}>
全部的
{transitions.map（{item，props，key}）=>{
常量页面=页面[项目]；
返回；
})}
);
}

您看到的不是页边空白顶部。它是移动到左侧并更改不透明度的旧组件，但它仍然存在。最后，当新组件处于垂直位置时，它将被卸载。大多数情况下，我们使用绝对位置，即新旧部件相互重叠。这样在卸载时就不会发生碰撞。大概是这样的：

---

from:{opacity:0，transform:“translate3d（100%，0,0）”，position:“absolute”}，

谢谢你的帮助！然而，React声称它不能对未安装的组件执行更新，这意味着这个小脚本中存在内存泄漏。它必须来自React Spring动画，因为没有其他内容。你知道如何修复这个漏洞吗？我发现了一个问题（）。它说在版本9中也存在类似的问题。我尝试了一个随机版本（9.0.0-beta.2），它可以正常工作。我不知道该推荐什么。版本号令人困惑。要么你选择它的最高测试版本，要么你可以使用最新的rc.3，但你必须重构你的代码，因为它使用的api略有不同。或者您可以稍等一下，直到最终版本9。