今天小编跟大家讲解下有关基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果 的相关资料，希望小伙伴们看了有所帮助。
基于实现元素的展开收缩 通常的想法是通过控制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也是无法计算的。
3.实例
<style type="text/css">.el{ max-height: 0; overflow: hidden; transition: max-height 1s; -webkit-transform: max-height 1s; background-color: #666;}:checked ~.el{ max-height:800px; }#check ~label:before{content:"展开";display: inline-block;}:checked ~label:before{content:"收缩"!important;}</style>html:
<input id="check"type="checkbox"><label for="check"></label><div class="el"> <div class="box"style="width: 100%;"> 这<br/><br/>是<br/><br/>内<br/><br/>容<br/><br/>哦<br/><br/> </div></div>这样写的max-height 给定足够大的高度 就是言义上的任意高度 相对height来说比较灵活 两者的区别就是计算高度的过程 一个是由人为计算 一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高 写的时候尽量写大一点。
来源 ：https://www.cnblogs.com/Dobin/archive/2018/05/28/9091821.html
来源：爱蒂网
