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

http://dobinspark.com.cn/

前言：

　　在说到实现元素的展开收缩，通常的想法是通过控制display的元素属性和none之间的切换，虽然说功能可以实现，但是这种展开是没有任何动画的效果，只是单纯的显示与隐藏。例外一种方法就是通过JQuery的slideUp()、slideDown()方法，这是jQuery带有的功能属性，大家都应该很清楚，在有些情况下JavaScript框架都是没有动画模块的，比如移动端，所以使用CSS实现动画效果就成了最好的选择。

　　下面我们将说一说max-height的二三事!

 　　1.先上CSS参考手册关于max-height的说明

　　2.

　　　　使用CSS实现展开收缩的效果第一想法就是通过height+overflow:hidden实现，使用过这种方式的一般都知道在实现的过程都是将height的高度固定写死，高度auto的话是无法形成过渡的动画效果，auto是一个关键字值，并非数值，因此，height:100%的100%和auto两者，height从0px到auto也是无法计算的。

　　上实例：

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

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

　　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="width: 100%;height: 800px"></div>
</div>
<label for="check" >收缩</label>

 这样写的max-height，给定足够大的高度，就是言义上的任意高度，相对height来说比较灵活，两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高，写的时候尽量写大一点。

后记：当初看了张鑫旭的CSS世界，对max-height有过一点印象，最近接触使用到height展开收缩动画这一点，所以写编文章记录学习一下，关于这一点详细的具体介绍可以参考《CSS世界》一书中的介绍，其中可能存在疑点或者错误，如果有错误的地方，欢迎各位大牛指正！献上花花。。。(*^__^*) 嘻嘻……

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有