max-height实现展开收缩动画

/*css*/
   .element{
     max-height: 0;
     overflow: hidden;
     transition: max-height .25s;
     background-color: pink;
   }
   :checked ~ .element{
     max-height: 2000px; /*足够存放内容的高度*/
   }
/*html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style=" 100%;height: 800px"></div>
</div>
<label for="check" >收缩</label>

注：max-height设置的足够大后实际高度就由盒子的内容高度决定。