Html CSS转换父对象以匹配孩子的最终高度

玉例

div.parent
    div.child1
    div.child2

Child1在加载时可见，根据单击，Child1将隐藏，Child2将可见。再次点击可以扭转这种局面

隐藏/取消隐藏时，儿童应通过高度变化进行转换-从100%到0%，反之亦然。 父对象还应通过高度更改进行转换，以匹配新可见的子对象

从视觉上看，child1将显示为“向上滚动”，而child2则显示为“向下滚动”，父项将根据最终尺寸进行扩展或收缩

---

这可以通过CSS转换来完成吗？

只有在您事先知道孩子的最终高度时才能完成

var-button=document.querySelector（'button'）；
var parent=document.querySelector（'.parent'）；
button.onclick=函数（）{
parent.classList.toggle（'toggle'）；
}

.child1，
.儿童2{
高度：100px；
背景：#美国联邦航空局；
溢出：隐藏；
过渡：全部3秒；
}
.儿童2{
背景:#aff ;；
身高：0；
}
.儿童1{
身高：0；
}
.儿童{
高度：100px；
}

这里有东西
还是在这里
单击“我”

过渡部分可以使用CSS完成，但触发更改的隐藏/取消隐藏部分无法完成。@Harry同意您的意见，从“结束动画”事件中，你需要JavaScript。除非div有一个设定的高度，否则你也不能转换/设置动画到

auto/100%

。@Paulie\u D:这可以通过设置

max height

（比预期的最大高度高）并转换来克服。@Harry是的，使用最大高度是一种选择，但我认为这取决于提前知道最大高度（或设置一些可能不合理的数字），并且（希望）这不会干扰父高度。坦白地说，这是简单的几行JS/JQ，所以我会这么做。尽管我并不推荐CSS，但我还是对你的努力投了赞成票：）