基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

Posted 2020-12-15 ypppt

基于实现元素的展开收缩，通常的想法是通过控制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>

资源网站大全 https://55wd.com 设计导航https://www.wode007.com/favorites/sjdh

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来说比较灵活，两者的区别就是计算高度的过程，一个是由人为计算，一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高，写的时候尽量写大一点。