动态内容的 Css div 高度/宽度过渡

Question

<div>Text here</div>

假设我有一个带有文本字段的 div，我希望 div 在我输入更多文本并进行换行时顺利地进行高度/宽度过渡。有没有什么简单的方法可以在不涉及 Javascript 的情况下使用 css 进行这种转换？

如何编辑文本？ Javascript 或 AJAX 调用。

Answer 1

聪明的解决方案，尽管有警告:

1. 你必须知道一开始你可以设置的高度(0 可以)
2. 不是最干净的。

使用最大高度，而不是高度。从一些小的东西开始，无论 div 内容的默认高度是多少，然后将其设置为相当高的东西，因为它只会扩展以匹配您的内容。您可能还需要 overflow: hidden 这样您就可以在转换时实际看到 mask 。

.test{
  overflow: hidden;
  transition: 1s linear;
}
.test.begin{
  max-height: 15px;
}
.test.end{
  max-height: 400px;
}

请注意，动画速度基于最大高度之间的差异。即使您在 1 秒内仅对超过 100 像素的内容进行动画处理，显示的速度也将与您在 1 秒内对超过 385 像素的内容进行动画处理一样。

编辑:我早上还没喝咖啡，但你确定你不想喝吗，你知道......

<textarea>

?