使用 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 的值不宜过大,因为动画效果是线性的,所以超过元素本身高度的多余值越多,“收起”时造成视觉上的延迟越大。

发表评论

电子邮件地址不会被公开。 必填项已用*标注