1

I'm trying to use strictly CSS(3) to animate the height of a div larger and smaller, based on which class it has. The problem is that the larger height could/should change depending on how much content is in the div.

Here is my current code:

 .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; }

This works well, except when more content gets added to .failure-info and the inner-html goes over the 85px height for the large class. Content is added, and class is changed via jquery, so I'm not adverse to doing this with a jquery function if it can't be accomplished with pure CSS; however, I'd like to keep it CSS if possible!

Any ideas? Thanks in advance.

4

1 回答 1

0

按照为这个问题发布的答案然后删除（出于某种原因）我能够得到我想要的结果。这是代码：

.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 相对接近元素最终应该是的总高度（毕竟元素已添加到内部），那么动画将适当地计时。

于 2013-06-19T19:14:53.353 回答