css3怎么实现高度从固定到自动的过渡动画？

简单讲，目前是不行的。

当然有很多trick，比如设置max-height的动画（从固定值到一个肯定比auto大的值），或者更复杂的（引入脚本算computed value）方式。

之所以不能直接transition从auto到固定值，有一些深层次的原因。比如auto的实际值取决于layout，而按照现在的css spec，computed value是不包含layout计算的，而transition是针对computed value的。

有一些proposal希望解决这个问题，比如允许transition从固定值到calc(auto)【目前calc是不支持auto关键字的】，但在css工作组的任务里这个case还处于低优先级，并且目前也没有听说有浏览器有计划尝试实现。

方法一：

因为css中height从0到auto的变化会被默认为从0到0，所以设置过渡效果并不会生效

如果想要有点击展开的效果，可以考虑设置max-height为过渡样式

.list_div{display: none;background-color: #f0f0f0;width: 100%;max-height:0px;overflow: hidden;transition:all .5s ease-in;-webkit-transition:all .5s ease-in;}
.list_div.active{max-height: 1000px;}

$(".gf_list li").bind("click",function(){
  if($(this).hasClass("active")){
    $(this).removeClass("active");
    $("#js_list_"+$(this).attr("data-list")).removeClass("active");
  }else{
    $(this).addClass("active");
    $("#js_list_"+$(this).attr("data-list")).addClass("active");   
  }
});

但是这样设置的缺点是，动画时间是按从0PX到1000PX来计算的，所以如果设置动画时间比较长，收回的时候会有很长时间的“卡顿”，如果设置动画时间比较短，展开的时候会“唰”的一下瞬间完成，效果不好。

所以最好还是在高度相对比较固定的时候用这个办法的好。

方法二：

只提供思路没写具体代码。

一开始要展开的div在初始化的js里取出它的高度，赋给active的max-height，应该就可以了。