通过修改max-height打到高度自适应的过程。
展开状态
收起状态
一般场景描述需求（与项目业务无关）：
需要完成一种过渡效果,即height是变化的，但不是数字到数字的变化，因为不知道展开之后的高度到底是多少?不确定!!!。
然而我们知道，过渡效果height需要确定开始高度数字与结束数字才能体现出过渡效果，不然过渡属性不起作用。那么思路就是：通过js得到列表里子元素的个数项，以及子元素的高度，得到需要展示的整体高度，这样不多余也不缺少的将整体高度计算出来，不用估值。
我这里用maxHeight来完成的效果。
这里就用vue+ts的现场案例，以供参考
<div class="all-list">
<div v-for="item in listData" :key="item.id">
********
</div>
</div>@Watch('extend')//监视是否需要展开
changeExtend(value){
let fatherEle:any = document.querySelector('.all-list');//获取这里子元素的父元素dom
let childlenght = fatherEle.children.length;//获取子元素的个数
if(value && childlenght>0){//需要展开，并且子元素存在
let childEle:any = document.querySelector('.all-list')?.children[0];//获取其中一个子元素dom
let height:number = childEle.offsetHeight;//子元素dom的高度
fatherEle.style.maxHeight = `${height*childlenght}px`//给父元素设置maxHeight，初始化的时候css样式里是的是maxHeight：0px
}else{
fatherEle.style.maxHeight = `0px`
}
}.all-list{
overflow: hidden;
transition: all 0.6s;
max-height: 0;
}