寻求一种优雅的，仅用于CSS的隐藏/显示自动高度内容的方法（包含转换）
我想要一个只使用CSS转换的方法来有效地（并且有吸引力地）隐藏/显示hover的内容。
需要注意的是我希望保持dynamic（自动）高度。
看起来，最佳路线是在fixed height:0到height:auto ，但是，这在浏览器中的转换中还不被支持。
澄清回应评论 ::这不是一个等待，直到所有生活的浏览器是CSS3兼容的问题，而是解决一个CSS3本身的缺陷（如缺乏height:0 > height:auto ）
我已经探索了其他一些方法，可以在下面的小提琴（详细介绍见下文），但没有一个满足我，我会喜欢反馈/其他方法的提示。
http://jsfiddle.net/leifparker/PWbXp/1/
基本的CSS
.content{ -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; overflow:hidden; }
变化＃1 – 最大高度的黑客
.content { max-height:0px; } .activator:hover +.content{ max-height:2000px; }
缺点
一个。 您需要随意设置一个较高的最大高度 ，该高度最大高度与广泛的dynamic内容可能会切断信息。
湾 如果作为（ a ）的预防措施，则采取设置非常高的最大高度 ，animation的延迟变得难以处理，因为浏览器无形中转换了整个距离。 也使得缓解视觉效果变差。
变化＃2 – 填充和增长的幻觉
.content { padding:0px; height:0px; opacity:0; } .activator:hover +.content { padding:10px 0px; height:auto; opacity:1; }
缺点
一个。 这是震动。 这绝对比仅仅从内容中跳出内容略微好一些，并且通过转变不透明度来进一步销售效果，但是总的来说不是那种视觉上的光滑。
变化＃3 – 错误宽度的方法
.content { width:0%; } .activator:hover +.content{ width:100%; }
缺点
一个。 随着宽度的缩小，换行将强制任何额外的文本到后续的行，并且我们最终得到一个仍然需要房地产的超高隐形div。
变化＃4 – 有效，但紧张，字体大小
.content { font-size:0em; opacity:0; } .activator:hover +.content{ font-size:1em; opacity:1; }
缺点
一个。 虽然这种效果非常好，但随着字体的增长，线条的移动也会引起不良的抖动。
湾 这仅适用于由文本组成的内容。 为了pipe理input和图像的缩放，还需要添加其他转换，虽然完全可行，但会降低简单性。
变化＃5 – 线高的卑鄙
.content { line-height:0em; opacity:0; } .activator:hover +.content{ line-height:1.2em; opacity:1; }
缺点
一个。 我最喜欢的是美学，但是和＃4一样，这个工作最简单的方法就是纯文字内容。
变化＃6 – 反保证金（由@graphicdivine提供）
.wrapper_6 { min-height: 20px } .wrapper_6 .activator {z-index:10; position: relative} .wrapper_6 .content { margin-top: -100%; } .wrapper_6 .activator:hover +.content{ margin-top: 0 }
缺点
一个。 hover时间有一个延迟，这不是最佳的。 这是内容被隐藏在屏幕上的结果，在出现之前需要时间向下制作。
湾 margin-top: -100%是相对于包含元素的宽度。 所以，stream体devise有一个潜力，当窗户缩小时， margin-top不会足以保持内容的隐藏。
正如我之前所说，如果我们只能在height:0和height:auto之间转换，这将是没有争议的。
在那之前，有什么build议？
谢谢！ 雷夫
试试这个， 反边距 ：
.wrapper_6 { min-height: 20px } .wrapper_6 .activator {z-index:10; position: relative} .wrapper_6 .content { margin-top: -100%; } .wrapper_6 .activator:hover +.content{ margin-top: 0 }
那么…我知道这已经有一段时间了，但是我需要使用一个高度animation，并且相信很多其他程序员仍然需要或者需要这样做。
所以，我倒在这里是因为当用户hover单元格时，我需要在单元格表格中显示产品说明的模式细节。 没有用户hover，只显示最多两行描述。 一旦用户将其hover，所有行（文本可以是1到8行，dynamic和不可预知的长度）必须以某种高度animation显示。
我遇到了同样的困境，并select使用最大高度转换（设置一个高的最大高度，我确信这不会削减我的文本），因为这种方法在我看来是最简洁的解决scheme高度。
但是我不能满足于像你这样的“滑上”animation的延迟。
那时候我在这里find关于转换曲线的评论： http : //css3.bradshawenterprises.com/animating_height/ 。
这个家伙的想法很出色，但是这个解决scheme只是“切断”了“滑下来”animation的效果。 所以想一下我刚刚来到最后的解决scheme。
所以这里是我使用Rhys的想法 （上面链接的人）的解决scheme ：
向下滑动animation（hover），“ 平滑增长 ”，以及没有 （几乎）“ 延迟 ”的向上滑动animation：
div { background-color: #ddd; width: 400px; overflow: hidden; -webkit-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); -moz-transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); transition: max-height 1.5s cubic-bezier(0, 1.05, 0, 1); max-height: 38px; } div:hover { -webkit-transition: max-height 2s ease; -moz-transition: max-height 2s ease; transition: max-height 2s ease; max-height: 400px; }
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac lorem ante. Vestibulum quis magna pretium, lacinia arcu at, condimentum odio. Ut ultrices tempor metus, sit amet tristique nibh vestibulum in. Pellentesque vel velit eget purus mollis placerat sed sit amet enim. Sed efficitur orci sapien, ac laoreet erat fringilla sodales. </div>
你应该使用scaleY。
HTML：
<p>Here (scaleY(1))</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
CSS：
ul { background-color: #eee; transform: scaleY(0); transform-origin: top; transition: transform 0.26s ease; } p:hover ~ ul { transform: scaleY(1); }
我在jsfiddle上做了一个供应商前缀的代码版本， http://jsfiddle.net/dotnetCarpenter/PhyQc/9/
