使用 max-height 实现动画效果的“展开收起”

当页面中有大量非重要信息时通常使用“展开收起”来处理，常见的作法是在 display: none; 和其它属性之间切换。如果想加上些动画效果通常使用 JavaScript 来实现，若想用 CSS 来实现只需设置 max-height 的值在 0 和一个比目标元素高度大的值之间切换即可。

.box{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-in;
}
.box.show{
    max-height: 413px;
}

注意

max-height 的值不宜过大，因为动画效果是线性的，所以超过元素本身高度的多余值越多，“收起”时造成视觉上的延迟越大。