元素有一个展开收起的效果，展开的时候，高度是希望自适应内容高度的，所以设置了height:auto；但是这样一来，动画transition: all .3s就失效了，这里百度了一些控制max-height或者js重新计算展开的内容高度都能一定的解决，但总不是很好

现在有两个新方案，纯css解决，记录一下

<div class="parent-box">
     <div class="animation-box">height展开收起的动画</div>
</div>

方案一interpolate-size（推荐）

在动画元素的父元素加上interpolate-size属性

.parent-box{ 
interpolate-size:allow-keywords;//让子元素设置了height:auto的动画生效;
}

方案二calc-size

给动画元素加上height:calc-size属性

.animation-box{
    height:calc-size(auto,size)
}

新属性总是有一些兼容性问题，大家可以自行根据需求选择