javascript - 元素附加到 div 时的 CSS 过渡高度

Question

你好，我想在向 div 添加元素时平滑地过渡 div 的高度，但我无法让它工作我读了这篇文章 smooth growing of div when appending children using transitions

但它没有正确回答问题，因为它在元素中淡出而不是转换元素所在的 div 的高度

http://jsfiddle.net/nexq40oz/

setInterval(function() {
    var li = document.createElement("li");
    li.innerHTML = "item";
    document.getElementById("list").appendChild(li);
}, 1000);

#menu #list {
    max-height: 300px;
    transition: max-height 0.15s ease-out;
    background: #d5d5d5;
}

<div id="menu">
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Answer 1

您需要添加一个 transition li 元素的 max-height 的类，并添加 requestAnimationFrame 对父元素产生影响，

setInterval(function() {
    var li = document.createElement("li");
    li.innerHTML = "item";
    document.getElementById("list").appendChild(li);
    requestAnimationFrame(() => requestAnimationFrame(() => li.classList.add('expand')))

}, 1000);

#menu #list {
    background: #d5d5d5;
}

#menu #list li {
  max-height: 0;
  transition: max-height 1s ease-out;
}

#menu #list li.expand {
  max-height: 200px;
}

<div id="menu">
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
    </ul>
</div>