CSS3动画高度到动态量答案

【问题标题】：CSS3 Animate Height to Dynamic AmountCSS3动画高度到动态量
【发布时间】：2013-06-09 01:23:42
【问题描述】：

我正在尝试严格使用 CSS(3) 来为 div 的高度设置动画，这取决于它所具有的类。问题是较大的高度可能/应该根据div 中的内容量而改变。

这是我当前的代码：

 .failure-info{ width:97%; 
    padding:.2em .5em 0 .5em; 
    overflow:hidden; 
    cursor:pointer; 
    -moz-transition-property: height; -moz-transition-duration: .7s;
    -webkit-transition-property: height; -webkit-transition-duration: .7s;
    transition-property: height; transition-duration: .7s; 
 }
.failure-info.height-small{ height:16px; }
.failure-info.height-large{ height:85px; }

这很好用，除非将更多内容添加到 .failure-info 并且内部 html 超出了大型类的 85px 高度。添加内容，并通过 jquery 更改类，因此如果无法使用纯 CSS 完成，我不反对使用 jquery 函数执行此操作；但是，如果可能的话，我想保留它的 CSS！

有什么想法吗？提前致谢。

【问题讨论】：

有人刚刚用小提琴 (jsfiddle.net/2QcCC/2) 发布了一个答案，以使用最大高度而不是高度作为过渡属性。这似乎有效，所以无论是谁都应该重新发布他们的答案......

标签： css dynamic jquery-animate height css-transitions

【解决方案1】：

按照针对此问题发布的答案然后（由于某种原因）删除了我能够得到我想要的结果。代码如下：

.failure-info{ width:98%; padding:3px 1% 0 1%; overflow:hidden; cursor:pointer; max-height:16px;
   -moz-transition-property: max-height; -moz-transition-duration: .7s;
   -webkit-transition-property: max-height; -webkit-transition-duration: .7s;
   transition-property: max-height; transition-duration: .7s; 
 }
.failure-info.height-small{ max-height:16px;  }
.failure-info.height-large{ max-height:150px; }

所以，基本上我使用 max-height 属性而不是 height 属性来实现过渡效果，只要 max-height 相对接近元素最终应该是的总高度（之后所有必要的元素都已添加到内部），然后动画将适当地计时。

【讨论】：