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一样好。

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

1 个答案: