绝对定位的div上的css3高度过渡到溢出自动失败[重复]答案

【问题标题】：css3 height transition on an absolute positioned div to overflow auto fails [duplicate]绝对定位的div上的css3高度过渡到溢出自动失败[重复]
【发布时间】：2014-03-12 02:32:20
【问题描述】：

我想这个例子很容易解释，我不知道为什么 div 首先缩小，然后弹出到正确的高度。

这里是示例代码

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

和 CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: 200px;
  background-color: yellow;
  overflow: hidden;
}

.abs:hover {  height: auto; transition: height 1s; }

这是一个小提琴链接，内容为：http://jsfiddle.net/3G7vG/

我在我的 linux 机器上使用 chromium 版本 31.0.1650.63 Debian jessie/sid (238485) 对此进行了测试

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

height:auto 不支持作为 css3 转换的一部分。

您应该尝试min-height、max-height 或transform（使用scalex(aNumberBetweenZeroAndOne)）

http://jsfiddle.net/LefQV/

【讨论】：

这是一个时髦的解决方案jsfiddle.net/E8Tre，如果你想让你的动画时间正确。答案中解决方案的问题在于，花费了 1 秒将 max-height 从 40 扩展到 300，并且只要达到 .abs 内的内容高度，高度的增长就会停止，这可能很可能在 1000 毫秒之前
就我而言，这不是问题，所以感谢您的解决方案；）

【解决方案2】：

因为您将 div.abs 的高度设置为 40px

height: 40px;

改为自动

 height:auto;

完整的样式是

 .abs {
            position: absolute;
            height:auto;
            width: 200px;
            background-color: yellow;
            overflow: hidden;
        }

【讨论】：

【解决方案3】：

尝试将其用作您的 css：

.block {
position: absolute;
height: 250px;
width: 250px;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
overflow:hidden;}
.abs {
position: absolute;
height: 40px;
width: 200px;
background-color: yellow;
overflow: hidden;
transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;}
.abs:hover {  height: 100%; }

try this

【讨论】：