主页 / 问题 / 796681
Accepted
Aleksey exec
Asked:2020-03-12 01:19:42 +0000 UTC2020-03-12 01:19:42 +0000 UTC

平滑拉伸 div

  • 772

使用ajax将其他div添加到.message类的div容器中 如何在添加新元素时使.message容器 沿内容高度平滑拉伸？

javascript

2 个回答

  1. Best Answer

    该属性具有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>

    • 1

  2. 这就是你的意思 jquery::animate 吗？

    并解释什么是高度 - 最后插入的 div 的高度？

    • 0

相关问题