2

元素高度是按内容自动撑开的,如何用transition过渡动画实现高度从0到当前元素高度的变化

height: 0;
transition: all 1s linear;
height: 100px;

后面的100px不是固定的,是元素当前的高度,不用js获取高度的话,纯css有办法实现吗?

yr1014 96
2017-08-08 提问
4 个回答
1

这个问题实际等同于:用CSS实现由height:0height:auto的渐变

height:auto实际并不是一个具体的值,浏览器在执行该动画时还未取到实际值,因此没有渐变的效果;

解决方案:
1,用js获取其实际值,执行动画;

2,【缺陷】用max-height代替heightmax-height设置一个足够大的值,如由max-height:0max-height:1000px;此时动画会按照0到1000px渐变,视觉效果不好

0

用transform:scaleY(0);模拟如何,对老IE不友好

0

我也一直想知道这个问题。之前没有解决,所以都是用jquery的slideToggle()来做。

撰写答案

你可能感兴趣的

推广链接