是否可以使用 css interpolate-size 属性自动设置 height: auto 动画？

Question

我有这段代码，我想在添加更多文本时为高度设置动画。可以吗？

document.getElementById("append").addEventListener('click', () => {
  document.getElementById("text").innerHTML += ' test test test test test test'
})

#text {
  height: auto;
  interpolate-size: allow-keywords;
  width: 200px;
  border: 1px solid green;
  transition: height 1s ease;
}  

<button id="append">append</button>
<div id="text">test</div>

Answer 1

要在添加更多文本时对

div

的高度进行动画处理，您需要显式设置高度，因为由于自动调整大小的动态特性，

height: auto;

不会进行动画处理。相反，您可以动态计算高度，并在添加内容时使用 JavaScript 设置高度。

这是代码的更新版本，可在附加更多文本时实现高度动画：

const textDiv = document.getElementById('text');
const appendButton = document.getElementById('append');

appendButton.addEventListener('click', () => {
  // Append text to the div
  textDiv.innerHTML += ' test test test test test test';

  // Get the new height of the div after text is added
  const newHeight = textDiv.scrollHeight;

  // Set the height explicitly to trigger the animation
  textDiv.style.height = newHeight + 'px';
});

// Set initial height
textDiv.style.height = textDiv.scrollHeight + 'px';

#text {
  width: 200px;
  border: 1px solid green;
  overflow: hidden;
  /* Important to animate height */
  transition: height 0.5s ease;
  /* Adjust time and ease as needed */
}

<button id="append">append</button>
<div id="text">test</div>