max-height实现过渡效果

背景

实现点击下拉按钮出现功能卡片添加过渡效果。起初通过设置初始状态height: 0，到展示卡片height: auto以及transition过渡实现功能，be like:

.card {
    position: absolute;
    height: 0;
    overflow: hidden;
    transition: height 300ms linear;
​
    &.active {
        height: auto;
    }
}

功能卡片的显隐并没有实现过渡效果。查阅资料后发现：transition不支持属性变化auto，必须是一个确定的值才能进行过渡计算。

max-height实现过渡

既然不能使用height，那有没有其他的属性可以为我们提供帮助呢？灵光一现 —— max-height。代码实现，be like:

.card {
    position: absolute;
    overflow: hidden;
    max-height: 0;
    transition: max-height 1000ms linear;
    
    &.active {
        max-height: 200px;
    }
}

通过max-height的确可以实现过渡效果，不过在使用时也有需要注意的地方：

⭐️ max-height，必须设置一个合理的值，如果比想要展示的元素的height小的话，会发生截断的情况，导致元素展示不全；如果设置的max-height过大，会造成过渡时间过短，以上述max-height: 200px过渡时间为1s为例，如果元素真实高度为height：20px，那么实际过渡效果的过渡时间只有 (20 / 200) * 1000 ms。

因此，想要通过max-height实现过渡，必须选用一个合适的值才行。

最后

鄙人初次写作，文笔有不好之处或知识点有误的地方还请各位看官多多包涵和勘正，如果有好的建议和想法也可以在评论区留言！最后创作不易，本篇文章对您有所帮助的话，请记得点赞、收藏，感谢！