让height:auto有过度效果

当分类过长时,我们希望它先显示一行,当点击某个按钮或者鼠标移上去的时候把内容显示完全;一开始指定父元素的高度为某一个固定值,例如height:24px;,我们希望展开的时候过渡到:height:auto,这时候发现完全没有过渡效果,太low了,那我们换种方式,用max-height。</p>
css:</p>
.list{ transition:max-height 0.5s; width:600px; max-height:200px; overflow: hidden; }
展开后的样式:</p>
.list.active{ max-height:3000px; }
关键点在这里,指定一个很大的大于元素height:auto 时的高度的值,让元素过渡到一个达不到的height值,模拟了height:auto过渡的效果</p>
4