Html 使用单选按钮在div之间进行淡入淡出切换

我有两个div，通过两个单选按钮切换可见性。 我不知道如何使用css转换在切换DIV时淡入淡出内容。例如，将DIV淡出到左侧，而另一个从右侧淡入

第二个问题是，我试图将div设置为position:absolute，但两个div下面的内容将被隐藏，我需要隐藏/显示的两个div下面的内容始终位于下方。所以我想绝对位置是不行的

.div\u one，
二组{
显示：无！重要；
}
#无线电一号：已检查~.第一分区，
#无线电二号：选中~.div二号{
显示：块！重要；
}    	
.第一分区{
背景颜色：灰色；
}
二组{
背景颜色：橙色；
}
#下面{
背景颜色：粉红色；
}

01
02
第一组
第二部分


我需要在上面的块下面，不管它们的高度如何。

当一个

div

滑向侧面，另一个滑入时，如果你想制作动画，通常会做什么，将它们都放在一个父

div

中（通常称为轨迹），该轨迹的宽度是其父轨迹的两倍，然后使用

transform:translateX（）

移动其位置。同样重要的是，给曲目

overflow:hidden。现在你不需要给幻灯片一个绝对的位置

关于轨迹高度，我添加了一个JS代码段，它将根据显示的项目更改高度

示例：


const track=document.getElementById（'track'）；
const slides=document.querySelectorAll（“#track>.slide”）；
const buttons=document.queryselectoral（'.radio_button'）；
按钮。forEach（（按钮，idx）=>{
按钮。addEventListener（'单击'，（）=>{
让高度=幻灯片[idx]。离视；
track.style.height=高度+px；
});
});
*{
溢出：隐藏；
}
#跟踪{
宽度：200%；
过渡：所有0.3秒缓解；
溢出：隐藏；
高度：1米；
}
.幻灯片{
宽度：50%；
显示：内联块；
浮动：左；
}
#无线电一号：已检查~#跟踪{
转化：translateX（0%）；
}
#无线电二号：已检查~#跟踪{
转化：translateX（-50%）；
}
#第一分区{
背景颜色：灰色；
}
#二组{
背景颜色：橙色；
}
#下面{
背景颜色：粉红色；
}

01
02
第一组
第二组




我需要低于上面的块，而不管它们的高度。
我的所有div上都有另一个类，它将它们设置为内联块。要显示：无覆盖它，我必须添加！谢谢你，丹尼尔，这正是我需要的。不过我不想设定高度……我会试试看，看是否有问题。否则，我找到了这个，并试图复制代码，但不知何故，我无法让它工作：我添加了一个JS代码段，可以为您更改高度。您只需将初始高度设置为显示的第一个项目的高度。