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

Question

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