如何使 div 的高度随内容和宽度平滑过渡？

Question

我有一个 div 用作信息框，提供与其关联的项目的额外信息。现在这个 div 可能包含任意数量的内容，所以我无法修复 css 中的高度。这很好，但我也希望这个 div 在用户打开它时有一个很好的过渡，这就是我运行遇到问题的地方。我的所有转换都正常工作，它们在这里 (+ open/closed css)

#info.hidden {
  opacity:0;
  width:0px;
  height:10px;

  transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out, visibility 0s linear .5s;
  /* with -moz- & -webkit- */
}

#info.visible {
  width:150px;

  transition: width .5s ease-in-out, height .5s ease-in-out, opacity .5s ease-in-out;
  /* with -moz- & -webkit- */
}

我遇到的问题是过渡期间的小宽度导致文本换行，扩展了框的高度并且没有达到预期的效果。理想情况下，高度会从 10px 平滑地扩展到文本的高度，但它会在过渡过程中一直跟随文本的底部。同样在关闭时，高度直接跳到 10px。

这个问题可以看这里：http://jsfiddle.net/Daniel300/1nhs9w78/.

我尝试了各种方法，包括向文本添加包装器 div，希望包装器 div 会溢出 div 的底部（或侧面）在过渡期间。我还弄乱了 display 和 overflow 属性，但似乎没有任何效果。

感谢您的帮助！

Answer 1

我找到了一种方法来执行此操作，这不是一个有效的解决方案，但却是一种解决方法。这似乎是我目前能做的最好的了。

首先，将 white-space: nowrap; 添加到 div 可以防止文本换行和扩展 div。

其次，我找到了我之前看到的this post，但我认为它不起作用（可能我设置的值太高了）。本质上，您不能从固定值过渡到自动（这正是我试图做的）。因此，您必须将 max-height 转换为它永远无法达到的值。显然我不能严格按照我的问题这样做，但我可以将它设置为合理的最大值。

这是我的新代码：https://jsfiddle.net/Daniel300/mfegxzuc/。

不完美，但可能和我想得到的一样好CSS。

如何使 div 的高度随内容和宽度平滑过渡？

How can I make the height of a div transition smoothly with content and width?

html

css

css-transitions