如何使用'height：fit-content'为动态高度变化设置动画

Question

我有一个与height: fit-content的div。当我向该div添加新的浮动文本节点时，div的高度逐步增加以适应其新内容高度。

如何使用transition: height 1s;为高度变化设置这个高度变化的动画？

---

如果我知道新的浮动文本节点附加到div之前和之后div的高度我可以使用transition: height 1s;并在附加子节点后将div的height设置为新的高度。 =>顺利过渡。

可悲的是，我不知道目标高度（虽然我也更喜欢仅CSS解决方案），因为文本尚未呈现。我的文档中也只提供了vanilla JS和CSS。

请参阅以下代码段作为向div添加浮动文本节点的示例。在那里你可以看到div的高度在每个添加的文本节点的一个大跳跃中增加。我希望它顺利过渡：

document.querySelector('button')
  .addEventListener(
    'click',
    () => document.querySelector('div')
      .appendChild(document.createTextNode(' How to animate this change in height?')));

div {
  background-color: lightblue;
  border: 1px solid black;
  width: 100px;
  height: fit-content;
}

<button type="button">toggle</button>

<div>
some text<br />
even more text<br />
so much text
</div>

Answer 1

虽然这是一个沉重的JS方式，但以下是解决问题的方法：

它使用两个div，一个是外部，一个是内部。外部div用作内部div的转换视图限制容器，而内部div包含实际文本节点。

内部div的高度像问题的代码一样跳跃，因为它的高度符合其内容。此跳转由具有静态硬编码高度的外部div隐藏。添加文本节点后，外部div的高度将更新为与内部高度匹配（当前未包含在计算中的边框大小）。由于它有transition属性的CSS height，它可以平滑地增加到目标大小。

function updateDiv() {
  outer.style.height = inner.clientHeight + 'px';
}

const inner = document.querySelector('div.inner');
const outer = document.querySelector('div.outer');

document.querySelector('button')
  .addEventListener(
    'click',
    () => {
      inner.appendChild(document.createTextNode(' How to animate this change in height?'));
      updateDiv();
    });

updateDiv();

div.outer {
  background-color: lightblue;
  border: 1px solid black;
  width: 100px;
  
  overflow: hidden;
  height: 0;
  transition: height 1s;
}

div.inner {
  background-color: purple;
  
  width: 100%;
  height: fit-content;
}

<button type="button">toggle</button>

<div class="outer">
  <div class="inner">
    some text<br /> even more text<br /> so much text
  </div>
</div>