我想要一个方法，只使用CSS过渡，有效地(和吸引人的)隐藏/显示悬停的内容。
需要注意的是，我希望保持动态(自动)高度。
看起来最优的路径是在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 - Max-Height Hack
.content { max-height:0px; }
.activator:hover +.content{ max-height:2000px; }
缺点
。您需要任意设置一个upper max-height，对于大量的动态内容，这可能会潜在地切断信息。
b。如果，作为预防措施(a)，您将设置为非常高的upper max-height，则动画延迟变得尴尬，并且无法维持，因为浏览器无形地转换整个距离。这也降低了视觉效果。
变化#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 -有效，但紧张，Font-Size
.content { font-size:0em; opacity:0; }
.activator:hover +.content{ font-size:1em; opacity:1; }
缺点
。虽然这有一个不错的，全面的效果，但随着字体的增长而移动的行换行会导致不吸引人的抖动。
b。这只适用于由文本组成的内容。需要添加其他转换来管理输入和图像的缩放，虽然完全可行，但这会降低简单性。
变化#5 - Line-Height的Butteriness
.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 }
缺点
。悬停时有延迟，这不是最优的。这是由于.content被隐藏在屏幕上很远的地方，并且在出现之前需要时间向下动画。
b。 margin-top: -100%是相对于包含元素的宽度。因此，在流体设计中，当窗口缩小到很小的时候，margin-top将不足以保持.content的隐藏。
就像我之前说的，如果我们能在
height:0和height:auto之间转换，这一切就都没有意义了。
在那之前，有什么建议吗?谢谢!列夫
试试这个,的anti-margin :
.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 }
嗯…我知道这已经有一段时间了，但我需要使用高度动画，并且相信许多其他程序员仍然需要或将需要这样做。
所以，我落在这里是因为当用户悬停单元格时，我需要在单元格表中显示产品描述的模式详细信息。没有用户悬停，最多只能显示2行描述。一旦用户将其悬停，所有行(文本可以从1到8行，动态和不可预测的长度)必须显示某种高度动画。
我遇到了同样的困境，并选择使用最大高度过渡(设置一个较高的最大高度，我确信不会剪切我的文本)，因为这种方法在我看来是动画高度的最干净的解决方案。
但是我不能像你一样对"向上滑动"动画的延迟感到满意。
这时我在这里找到了一个关于过渡曲线的评论:http://css3.bradshawenterprises.com/animating_height/.
这个家伙的想法很聪明，但仅仅这个解决方案就"切断"了"滑动"动画的效果。所以我想了一下，终于找到了一个解决办法。
所以这是我使用Rhys的想法的解决方案(上面链接的家伙):
向下滑动动画(悬停)，带有"平滑增长"，向上滑动动画没有(虚拟)"延迟:
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>这是一个简单的JsFiddle
这是你的JsFiddle更新(切片，确实)
这是一个完美的(在我看来)解决方案的菜单，描述和一切不是非常不可预测的，但正如你之前指出的，有必要设置一个高的最大高度，并可能切断一个惊人的高动态内容。在这种特殊情况下，我将使用jQuery/JavaScript来制作高度动画。由于内容的更新将使用某种JavaScript完成，所以我认为使用Js方法制作动画没有任何害处。
希望我能帮到别人!
你应该使用scaleY
HTML:<p>Here (scaleY(1))</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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/