任意高度元素的展开收缩动画的实现（max-height）

展开收缩动画的实现有多种方式，比如JQuery的slideUp()、slideDown()方法实现；vue框架中可以借助<transition></transition >实现。如果只是通过js实现display的元素属性和none之间的切换，但是没有展开和收缩的动画效果。因此，用css实现该动画效果是比较不错的选择。

1、通常使用css实现收缩效果时，一般就会想到通过height+overflow:hidden实现，但这适用于收缩内容有固定的高度的情况，如果高度auto时是无法实现过渡的动画效果，auto是一个关键值，并非数值。height从0px到auto也是无法计算的。如下代码变不会出现预期的动画效果：

/*css*/  
.main{
            height: 0;
            overflow: hidden;
            transition: height .25s;
            background-color: pink;
 }
 :checked ~ .main{
            height: 100%; /*高度100%和auto都是生硬的效果，给定具体值可以实现动画*/
        }

/* html*/
<input id="check" type="checkbox">
<div class="main">
     <div class="box" style="width: 100%;height: 800px"></div>
</div>
<label for="check" >收缩</label>

2、正确出现预期的动画效果，用max-height实现，代码如下：

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

####### 3、 推荐一个css网址 https://www.zhangxinxu.com/wordpress/