如何实现向Div追加元素时平滑过渡height？

你的问题在于使用max-height实现过渡，但max-height并未随内容变化，所以无法触发高度过渡效果。因为CSS过渡仅对固定数值的属性变化生效，height:auto或未变化的max-height都无法触发过渡。

解决思路 #

1. 先将容器的高度设置为当前内容的实际高度（固定值）
2. 追加新元素后，再将容器高度设置为新内容的实际高度，利用CSS过渡实现平滑变化

修改后完整代码 #

HTML

<div id="menu">
    <ul id="list">
        <li>item</li>
        <li>item</li>
    </ul>
</div>

CSS

#menu #list {
    height: auto;
    overflow: hidden;
    transition: height 0.3s ease-out;
    background: #d5d5d5;
}

JavaScript

const list = document.getElementById("list");

setInterval(function() {
    // 1. 先设置为当前实际高度（固定值）
    list.style.height = list.scrollHeight + 'px';
    
    // 2. 创建并追加新元素
    const li = document.createElement("li");
    li.innerHTML = "item";
    list.appendChild(li);
    
    // 3. 等待DOM更新后，设置为新的实际高度，触发过渡
    requestAnimationFrame(() => {
        list.style.height = list.scrollHeight + 'px';
    });
}, 1000);

原理说明 #

• scrollHeight能获取元素内容的实际高度（包括溢出部分）
• 先将height设为当前固定值，再追加元素后更新为新的固定值，让CSS过渡能捕捉到属性变化
• requestAnimationFrame确保DOM完成渲染后再更新高度，保证过渡效果正常触发

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