我有一个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属性，但似乎什么也没用。
谢谢你的帮助！
我找到了一种方法，但这不是一个有效的解决方案，但是是一种解决方法。目前看来，这是我能做的最好的事情。
首先，添加white-space: nowrap;到div可以防止文本包装和扩展div。
其次，我找到了我之前看过的帖子，但我认为它不起作用（可能我将值设置得太高）。本质上，您不能从固定值转换为自动值（这正是我试图做的）。因此，您必须改为将最大高度转换为一个永远不会达到的值。显然，我不能严格按照我的问题进行此操作，但可以将其设置为合理的最大值。
这是我的新代码：https : //jsfiddle.net/Daniel300/mfegxzuc/。
不完美，但可能和我要使用CSS一样好。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句