Aleksey exec Asked:2020-03-12 01:19:42 +0800 CST2020-03-12 01:19:42 +0800 CST 2020-03-12 01:19:42 +0800 CST 平滑拉伸 div 772 使用ajax将其他div添加到.message类的div容器中 如何在添加新元素时使.message容器 沿内容高度平滑拉伸? javascript 2 个回答 Voted Best Answer yar85 2020-03-12T06:10:29+08:002020-03-12T06:10:29+08:00 该属性具有height初始值auto,因此transition: height无法使用它。 因此,最合理和最明显的解决方案是height显式设置属性值:在将内容插入容器时(获取内容的高度或插入后容器的高度)。 第二种方法的实现示例(插入后调整大小,按总高度): let container = document.getElementById('container'); updateHeight(container); // изначальная установка высоты в пикселях let count = 5, interval = setInterval(() => { // добавление 5 блоков с интервалом 1с if (!count) { clearInterval(interval); return; } container.insertAdjacentHTML('beforeend', '<div class="content-block"></div>'); updateHeight(container); // добавили контент - изменим высоту контейнера count--; }, 1000); // считает высоту элемента по принципу "scrollHeight минус паддинги" function updateHeight(el) { let cs = getComputedStyle(el), paddings = (parseInt(cs.getPropertyValue('padding-top')) || 0) + (parseInt(cs.getPropertyValue('padding-bottom')) || 0); el.style.height = (el.scrollHeight - paddings) + 'px'; } #container { border : 1px dashed red; padding: 8px; text-align: center; font: 16px sans-serif; color: red; overflow-y: hidden; /* обязательно */ transition: height 0.2s linear; } .content-block { height: 1em; /* явно указывать высоту потомков не обязательно, здесь это делается только потому что div'ы добавляются пустыми (мне лень копипастить lorem ipsum) */ margin: 8px; background: #77d; } <div id="container">Контейнер</div> Koshak01 2020-03-12T02:09:19+08:002020-03-12T02:09:19+08:00 这就是你的意思 jquery::animate 吗? 并解释什么是高度 - 最后插入的 div 的高度?
该属性具有
height
初始值auto
,因此transition: height
无法使用它。因此,最合理和最明显的解决方案是
height
显式设置属性值:在将内容插入容器时(获取内容的高度或插入后容器的高度)。第二种方法的实现示例(插入后调整大小,按总高度):
这就是你的意思 jquery::animate 吗?
并解释什么是高度 - 最后插入的 div 的高度?