通过修改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;
 }