我有一个用作信息框的 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。
其次,我找到了this post我之前看到过,但我认为它不起作用(可能我将值设置得太高)。本质上,您不能从固定值过渡到自动(这正是我试图做的)。因此,您必须将 max-height 转换为它永远无法达到的值。显然,严格来说我不能按照我的问题这样做,但我可以将其设置为合理的最大值。
这是我的新代码:https://jsfiddle.net/Daniel300/mfegxzuc/ .
不完美,但可能和我将要获得的 CSS 一样好。
关于html - 如何使 div 的高度随内容和宽度平滑过渡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31475737/