动态内容的Css div高度/宽度转换

Question

<div>Text here</div>

假设我有一个带有文本字段的div，我希望div能够平滑地进行高度/宽度转换，因为我输入更多文本并制作换行符。有没有简单的方法可以在没有Javascript的情况下使用css进行这种转换？

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

Answer 1

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

1. 你必须知道你可以在开头设置的高度（0会起作用）
2. 不是最干净的。

使用max-height，而不是height。从小的东西开始，无论div内容的默认高度是什么，然后将其设置为相当高的东西，因为它只会扩展以匹配您的内容。你可能也想要溢出：隐藏所以你可以在转换时看到掩盖。

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

请注意，动画速度取决于最大高度之间的差异。即使你只在1秒内制作超过100px的内容动画，显示的速度就好像你在1秒内制作了超过385像素的动画。

编辑：我还没有早上的咖啡，但你确定你不想要一个，你知道......

<textarea>

Answer 2

获取在您键入时展开的框的最简单方法是使用contenteditable属性。

<div contenteditable>Type here...</div>

Here是一个示范。

我不认为可以实现平滑，渐进的过渡效果，因为文本被输入到contenteditable元素中。由于缺少浏览器支持转换height: auto和百分比高度，因此转换动态元素高度已经相当困难。

可悲的是，您正在寻找的过渡效果很可能需要JavaScript，除非有人想出一个非常聪明的CSS解决方案。