Html 如何使用css动画设置菜单幻灯片的动画？

我正在开发一个纯css菜单。我试图创建菜单的幻灯片动画，但无法使其工作。我在网上查看了很多解决方案，但都不适用于我的案例

这是我案子的底稿

• 菜单有标题和子项（子菜单）。此菜单将仅为一级
• 我需要子菜单的高度在菜单标题后面快速移动
• 由于子项的数量是动态的，我希望在不使用特定高度的情况下实现这一点
• transform:translateY似乎是一个更好的选项，但菜单项在标题上方可见
• 我不希望菜单项出现在菜单标题上方，并使用translate或类似的功能

我不确定我是否在正确的轨道上，或者我是否遗漏了一些基本的东西

$（函数（）{
$（'.accordion-tabs__标题'）。单击（函数（）{
$（'.accordion-tabs__body'）。toggleClass（'collapsed'）；
$（'.accordion-tabs__body'）。toggleClass（'expanded'）；
});
});
。手风琴选项卡{
位置：相对位置；
顶部：2rem；
宽度：60%；
}
.accordion-tabs___头{
过渡延迟：1s；
显示器：flex；
对齐项目：居中；
填充：1雷姆0.5雷姆；
z指数：10；
位置：相对位置；
背景颜色：天蓝；
}
.手风琴标签标题标题{
保证金：0；
填充：0；
}
.手风琴式舌体{
位置：绝对位置；
宽度：100%；
转换：200ms转换易进易出；
}
.accordion-tabs___体。展开{
z指数：1；
转化：translateY（0%）；
}
.折叠的手风琴标签{
z指数：1；
转换：translateY（-100%）；
}
.accordion-tabs\uuuuuu body.accordion-tabs\uuuuuuu body\uuuu链接{
显示器：flex；
对齐项目：居中；
填充：0.875雷姆；
背景色：仿古白色；
}
.accordio-tabs\uuuuuuu body.accordion-tabs\uuuuuuuuu body\uuuuuu链接a{
文字装饰：无；
}

菜单标题Looong
我设法以最大高度实现了这一点

在react中使用此代码时，向上滑动动画的触发有点慢。不过，我让它看起来很好，轻松过渡


$（函数（）{
$（'.accordion-tabs__标题'）。单击（函数（）{
$（'.accordion-tabs__body'）。toggleClass（'collapsed'）；
$（'.accordion-tabs__body'）。toggleClass（'expanded'）；
});
});
。手风琴选项卡{
位置：相对位置；
顶部：2rem；
宽度：60%；
}
.accordion-tabs___头{
过渡延迟：1s；
显示器：flex；
对齐项目：居中；
填充：1雷姆0.5雷姆；
位置：相对位置；
背景颜色：天蓝；
}
.手风琴标签标题标题{
保证金：0；
填充：0；
}
.accordion-tabs\uuuu标题。已展开{
边框底部：无；
}
.手风琴式舌体{
溢出：隐藏；
位置：绝对位置；
宽度：100%；
边框底宽：2px；
边框底部样式：实心；
}
.accordion-tabs___体。展开{
最大高度：100vh；
过渡段：最大高度为500ms；
}
.折叠的手风琴标签{
最大高度：0；
过渡：最大高度为200ms；
}
.accordion-tabs\uuuu-body\uu-link{
显示器：flex；
对齐项目：居中；
填充：0.875雷姆；
边框顶部宽度：1px；
边框顶部样式：实心；
背景色：仿古白色；
}
.手风琴标签\主体\链接a{
文字装饰：无；
}

菜单标题Looong
无法使用“自动高度”正确设置动画。您可以设置“最大高度”动画并设置菜单的“最大高度”。看到这个：@Phiter我试过了最大高度。它按预期工作，但在React Redux中触发动画需要一段时间。应该与react和max-height中的虚拟dom有关。如果您不介意设置一个固定的高度，您可以将其与overflow hidden一起使用。@Phiter就是这样。子项可以是任意数量的。高度不能固定。@Phiter-最大高度是唯一有效的解决方案。它的反应并不完美，但至少可以起作用。谢谢！：）