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

Question

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

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

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

Answer 1

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

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

解决方案：
1，用js获取其实际值，执行动画；

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

Answer 2

http://www.zhangxinxu.com/wor...

Answer 3

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

Answer 4

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

Answer 5

可以参考一下这个 https://blog.csdn.net/shi8510...