在 height:100px 到 auto 之间的 CSS 过渡问题答案

【问题标题】：Trouble with CSS transition between height:100px to auto在 height:100px 到 auto 之间的 CSS 过渡问题
【发布时间】：2012-02-16 09:49:40
【问题描述】：

一个固定高度的div 包含的元素的内容比它所能包含的要多。当处于非活动状态时（鼠标未悬停在其上），此 div 的高度为 100px，并且内容的底部可见。

当这个div 悬停时，里面的所有内容都应该向下滑动并显示出来。我尝试了很多方法来实现这一点，应用top 和bottom 声明，使用max-height 和其他方法。
注意：里面的内容是未知的/变化的高度

但是，到目前为止，我的所有方法都未能成功创建所需的效果。

这是我的一种方法的链接：
http://jsfiddle.net/fLuHL/
它向上滑动而不是向下滑动。

【问题讨论】：

标签： css height css-transitions

【解决方案1】：

我不确定这是否是你所追求的，但是...updated fiddle here

我在 css 中添加了 top 属性。

【讨论】：

感谢您的回复，我一直在寻找类似的东西，但是，里面的内容是未知/可变高度，所以我无法指定数值（我忘了提较早，已修改）。

【解决方案2】：

由于过渡不考虑 height=auto，所以我通常使用 translateY 来达到相同的效果。

这里是代码：http://jsfiddle.net/5oL3gf7n/

我只是把你代码的 CSS 改成：

.post-container {
display: block;
height: auto;
position: relative;
margin-top: 0;
z-index: 496;
transition: transform .5s;
    -moz-transition: transform .5s;
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
transform: translateY(calc(100px - 100%));
}

.text {                        
background-color: #666 !important;
padding: 20px;
}

.post-container:hover {
transform: translateY(0);
}

【讨论】：