β

Transition height from 0 to auto

小曹哥的博客 152 阅读

CSS3的transition可以作用于大部分属性值为数值之类的属性,包括width、height、font-size、color、opacity等。但是将transition应用于 height:auto;时 ,浏览器会识别height值为0,因此无法直接从 height: 0; 过渡到 height: auto;

一种简单的方法是,将过渡应用于max-height属性,通过设置一个大于元素所可能达到的最大高度值。代码如下:

.elem {    max-height: 0;    overflow: hidden;    -webkit-transform: translate3d(0,0,0); /* 开启硬件加速 */    transform: translate3d(0,0,0);    -webkit-transition: all .3s ease-in;    transition: all .3s ease-in;}.elem-show {     max-height: 200px; /* 假如元素的最大可能高度为200px */}

缺陷是,在元素最大可能高度与实际高度相差比较大时,由于过渡总是从最大可能高度过渡到0,因此会看到过渡效果有明显延迟。查看 DEMO
另一种方法是通过JS修正 height:auto; 不能过渡的问题,从而也避免了第一种方法的缺陷。思路是:

使用两种方法写的一个下拉菜单效果: DEMO ,可查看相关源码

参考资源:

CSS3的transition可以作用于大部分属性值为数值之类的属性,包括width、height、font-size、color、opacity等。但是将transition应用于 height:auto;时 ,浏览器会识别height值为0,因此无

作者:小曹哥的博客
原文地址:Transition height from 0 to auto, 感谢原作者分享。

发表评论