利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样，所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画：红框2为详细内容，默认收起；红框1处为事件响应热区，点击后展开或收起红框2的内容。

这个 动画我们需要考虑以下几点：

1. 红框2的容器为屏幕的100%，内容字数不固定，但有最大字数限制;

2. 红框2相同字数的内容在不同尺寸屏幕下的高度不同；

3. 不使用任何动画框架。

我们在制作下拉展开动画的时候，一般首先会想到将内容节点的高度设置为0，然后事件触发将内容节点的高度设为展开后的值。这种方法在内容固定并且容器宽度固定的场景下没有问题，但是并不适用与屏幕尺寸不统一的移动设备。

那么该怎么做呢？关键字：max-height！移动设备的特点之一，便是其浏览器对css属性和动画支持的很好，我们可以大胆的使用。细节如下：

1. 将容器收起状态的max-height设置为0，展开状态为一个足够大的值（综合考虑最大字数限制以及屏幕尺寸）；

2. 展开状态的高度值建议采用rem单位，具体取值还需要考虑屏幕尺寸。

简易demo如下，因demo无法模拟移动设备的多屏尺寸，大家可以改变container的宽度模拟，当然，移动设备上container的宽度取值为100%：

 

See the Pen 不同尺寸移动设备下拉动画适配 by Joe (@ihardcoder) on CodePen.

用max-height实现有一个缺点，大家应该会发现，展开和收起的动画快慢不一样！这个缺陷并不容易弥补，但是可以通过媒体查询精良精确展开状态的max-height取值来弥补。