Html 使用CSS设置元素大小的动画

我正在尝试设置

.folder

大小的动画，否则背景会保持不变

-运行代码段。它将解释这个问题

我不想设置固定值：

.enabled > .folder-body {
  height: 100px;
}

:not(.enabled) > .folder-body {
  height: 0px;
}

我尝试使用transform，但无法使其工作

（）

const folder=document.querySelector（“#folder”）；
const header=document.querySelector（“#header”）；
header.addEventListener（'click'，（）=>{
folder.classList.toggle（'enabled'）；
});
p{
保证金：0；
}
.文件夹{
边框：2件纯黑；
溢出：隐藏；
}
.文件夹标题{
显示器：flex；
对齐项目：居中；
颜色：白色；
背景色：黑色；
}
.folder header>svg{
高度：15px；
填充物：白色；
过渡：所有0.2秒缓解；
}
.enabled>.folder header>svg{
变换：旋转（90度）；
}
.文件夹正文{
过渡：所有0.2秒缓解；
}
.enabled>.folder body{
转化：无；
剪辑路径：多边形（0%0%，100%0%，100%100%，0%100%）；
能见度：可见；
}
：未启用（.enabled）>。文件夹正文{
转换：translateY（-100%）；
剪辑路径：多边形（0%100%、100%100%、100%100%、0%100%）；
可见性：隐藏；
}

菜单

Lorem ipsum dolor sit amet，奉献精英。这是一种液体！是否有一种不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产？同侧
我们需要一个有智慧的人，一个有能力的人，一个有自由的人？发明者，驱蚊剂
维尼安！练习，比泰？自由的暂时性问题是，我们必须解决目前的问题。最低限度的赔偿额，减去共同的赔偿额，同样的赔偿额，也必须有不平等的选择权。

您可以通过将元素的大小设置为比您的盒子更大的值来完成此操作。

然后，您可以通过设置
最大高度：0
将其关闭

我没有想到这一点。这里有一篇文章和一篇文章


const folder=document.querySelector（“#folder”）；
const header=document.querySelector（“#header”）；
header.addEventListener（'click'，（）=>{
folder.classList.toggle（'enabled'）；
});
p{
保证金：0；
}
.文件夹{
边框：2件纯黑；
溢出：隐藏；
}
.文件夹标题{
显示器：flex；
对齐项目：居中；
颜色：白色；
背景色：黑色；
}
.folder header>svg{
高度：15px；
填充物：白色；
过渡：所有0.2秒缓解；
}
.enabled>.folder header>svg{
变换：旋转（90度）；
}
.文件夹正文{
最大高度：500px；
过渡：所有0.2秒缓解；
}
.enabled>.folder body{
最大高度：500px；
}
：未启用（.enabled）>。文件夹正文{
最大高度：0；
}

菜单

Lorem ipsum dolor sit amet，奉献精英。这是一种液体！是否有一种不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产？同侧
我们需要一个有智慧的人，一个有能力的人，一个有自由的人？发明者，驱蚊剂
维尼安！练习，比泰？自由的暂时性问题是，我们必须解决目前的问题。最低限度的赔偿额，减去共同的赔偿额，同样的赔偿额，也必须有不平等的选择权。

高度为0的示例


const folder=document.querySelector（“#folder”）；
const header=document.querySelector（“#header”）；
header.addEventListener（'click'，（）=>{
folder.classList.toggle（'enabled'）；
});
p{
保证金：0；
}
.文件夹{
溢出：隐藏；
}
.文件夹标题{
显示器：flex；
对齐项目：居中；
颜色：白色；
背景色：黑色；
填充：0 10px；
}
.folder header>svg{
高度：15px；
填充物：白色；
过渡：所有0.2秒缓解；
}
.enabled>.folder header>svg{
变换：旋转（90度）；
}
.文件夹正文{
过渡：所有0.2秒缓解；
身高：0；
边框：2件纯黑；
框大小：边框框；
填充：0px；
}
.enabled>.folder body{
填充：10px；
}
.enabled>.folder body{
转化：无；
剪辑路径：多边形（0%0%，100%0%，100%100%，0%100%）；
能见度：可见；
高度：自动；
}
：未启用（.enabled）>。文件夹正文{
转换：translateY（-100%）；
剪辑路径：多边形（0%100%、100%100%、100%100%、0%100%）；
可见性：隐藏；
}

菜单

Lorem ipsum dolor sit amet，奉献精英。这是一种液体！是否有一种不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产不动产？同侧
我们需要一个有智慧的人，一个有能力的人，一个有自由的人？发明者，驱蚊剂
维尼安！练习，比泰？自由的暂时性问题是，我们必须解决目前的问题。最低限度的赔偿额，减去共同的赔偿额，同样的赔偿额，也必须有不平等的选择权。

我认为，如果您只为：not（.enabled）case保留height:0，而为.enabled case删除height，它将按您的预期工作。您所需要的只是删除.enabled case的高度。我添加了带有
height:0的示例和<代码>高度：au