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

【问题标题】：Css div height/width transition for dynamic content动态内容的 Css div 高度/宽度转换
【发布时间】：2014-04-03 00:26:18
【问题描述】：

<div>Text here</div>

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

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

【问题讨论】：

【解决方案1】：

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

使用最大高度，而不是高度。从小的开始，无论 div 内容的默认高度是什么，然后将其设置为相当高的值，因为它只会扩展以匹配您的内容。您可能还需要溢出：隐藏，这样您就可以在掩蔽转换时实际看到它。

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

请注意，动画速度取决于最大高度之间的差异。即使您只在 1 秒内制作超过 100 像素的动画，显示的速度也会如同您在 1 秒内制作超过 385 像素的动画一样。

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

<textarea>

【讨论】：

【解决方案2】：

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

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

Here 是一个演示。

不过，我认为在contenteditable 元素中输入文本时无法实现平滑、渐变的过渡效果。由于缺乏对转换height: auto 和百分比高度的浏览器支持，在动态元素高度上转换已经相当困难。

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

【讨论】：