CSS3 动画高度到动态量

Question

我正在尝试严格使用 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 并且 inner-html 超过 85px 大类的高度。添加内容，通过 jquery 更改类，所以如果不能用纯 CSS 完成，我不反对使用 jquery 函数；但是，如果可能的话，我想保留它的 CSS!

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

Answer 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 相对接近元素的总高度(在所有必要的元素都已添加到里面)然后动画将适本地计时。