Css 在我的React应用程序中，CSTranslation在转换期间垂直堆叠组件

我正在尝试使用

TransitionGroup

和

cstranslation

以及

react router dom

来创建页面之间的平滑过渡。出于调试目的，我将淡入淡出过渡时间设置为5秒

这是我的

应用程序
组件：

函数内部（）：React.ReactElement{
const location=useLocation（）
const currentKey=location.pathname.split（“/”[1]| |“/”
返回(
)
}
函数App（）：React.ReactElement{
返回(
)
}

它正确地嵌套在我的
index.tsx文件中的
React
以及我的Redux
提供程序
和
React-router dom
浏览器路由器
中：

ReactDOM.render(

下面是点击公会后立即出现的情况：


注意公会组件（现在只是一个页面，上面写着“马上就来…”）是如何在主组件上方弹出的

几秒钟后：


看看顶部是如何随着底部的淡出而淡入的。如果它们彼此重叠而不是垂直堆叠，这将非常有效

最后，在动画结束后：

@DCTID是正确的！我只需要为
设置
位置：绝对值
。淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出让我们更容易进行故障排除。您必须让每个页面的父级或根级为
position:absolute；
可能位于
top:0；left:0；
，但这取决于您。我是否可以建议将所有这些放在沙箱中？这将使我们更容易进行故障排除。您必须让每个页面的父级或根级为
pos条件：绝对；
可能位于
顶部：0；左侧：0；
但这取决于您。