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

时间:2022-06-18
本文章向大家介绍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,应该就可以了。