如何使用“高度：适合内容”为动态高度变化设置动画答案

【问题标题】：How to animate dynamic height change with 'height: fit-content'如何使用“高度：适合内容”为动态高度变化设置动画
【发布时间】：2019-02-20 07:12:51
【问题描述】：

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

如何使用 transition: height 1s; 为这种高度变化设置动画，类似于硬编码的高度变化？

如果我知道 div before 和 after 的高度，新的 floating 文本节点已附加到我可以使用的 div transition: height 1s; 并将 div 的 height 设置为附加子节点后的新高度。 => 平滑过渡。

遗憾的是，我不知道目标高度（虽然我也更喜欢纯 CSS 解决方案），因为文本尚未呈现。我的文档中也只有 vanilla JS 和 CSS。

请参阅下面的 sn-p 作为将浮动文本节点添加到 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>

【问题讨论】：

不确定您想要什么，请解释一下？
你可能想阅读this，它说明了几种不同的方法来做我认为你想做的事。
@BobRodes 这是一篇不错的文章。遗憾的是，它描述了 “硬编码高度 => 动态高度” 转换问题的解决方案。我想要实现的是 "dynamic height => dynamic height". 的过渡

标签： css animation dynamic height css-transitions

【解决方案1】：

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

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

内部 div 的高度像问题的代码一样跳跃，因为它的高度适合它的内容。此跳转被具有静态硬编码高度的外部 div 隐藏。添加文本节点后，外部 div 的高度将更新以匹配内部高度（当前不包括在计算中的边框大小）。因为它有一个 CSS transition 用于 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>

【讨论】：