html控制展开高度,HTML+CSS入门 max-height实现任意高度元素的展开收缩动画详解

本篇教程介绍了HTML+CSS入门 max-height实现任意高度元素的展开收缩动画详解，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

前言：

在说到实现元素的展开收缩，通常的想法是通过控制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*/

收缩

max-height的方法实现过程：

/*css*/

.element{

max-height: 0;

overflow: hidden;

transition: max-height .25s;

background-color: pink;

}

:checked ~ .element{

max-height: 2000px; /*足够存放内容的高度*/

}

/*html*/

收缩

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

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！