展开收缩动画的实现有多种方式，比如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/
