移除constraint类时max-height过渡动画不生效的解决方法

这个坑我踩过！你遇到的问题核心在于CSS过渡不支持auto作为过渡的目标值。当移除constraint类后，max-height从100px直接切换到auto，浏览器无法计算这两个状态之间的中间值，所以动画直接跳过，变成瞬间展开。

下面给你两种可行的解决方案：

方案一：用足够大的固定值替代auto #

这是最简单的方法，只要给.container设置一个比内容实际高度大得多的max-height值（比如1000px，根据你的内容调整），这样过渡就能在100px和这个大值之间平滑进行：

.container{
    max-height: 1000px; /* 替换原来的auto */
    background: red;
    overflow: hidden;
    transition: max-height 1s ease-out;
    /* 现代浏览器无需前缀，可省略webkit/moz/o前缀 */
}
.constraint{
    max-height: 100px;
}
h1 {
    font-size: 50px;
}

优点：代码改动极小，适合内容高度可控的场景；缺点：如果内容高度超过你设置的固定值，会出现截断。

方案二：JavaScript计算实际高度（更精准） #

如果你的内容高度不确定，用JS获取容器的真实滚动高度，再把max-height设置为这个具体数值，就能实现精准过渡：

const container = document.getElementById('container');
const button = document.getElementById('button');
button.addEventListener('click', ()=> {
    // 获取容器内容的实际高度（包括溢出部分）
    const realHeight = container.scrollHeight;
    // 先手动设置max-height为真实高度，触发过渡动画
    container.style.maxHeight = `${realHeight}px`;
    // 过渡完成后（和transition时长一致），移除类并重置max-height为auto（可选）
    setTimeout(() => {
        container.classList.remove("constraint");
        container.style.maxHeight = ''; // 让容器能自适应后续内容变化
    }, 1000);
})

对应的CSS可以保留原来的max-height: auto，因为JS会临时覆盖这个值：

.container{
    max-height: auto;
    background: red;
    overflow: hidden;
    transition: max-height 1s ease-out;
}
.constraint{
    max-height: 100px;
}

优点：适配任意内容高度，不会出现截断；缺点：需要额外的JS逻辑。

你可以根据自己的场景选择合适的方案，亲测两种都能解决你的过渡问题！

内容的提问来源于stack exchange，提问作者Tinkerer