Question

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

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

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

可悲的是，我不知道目标高度（尽管我也更喜欢仅使用CSS的解决方案），因为文本尚未呈现。另外，我的文档中仅提供香草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具有静态的硬编码高度。添加文本节点后，外部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>

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

1 个答案: