1. 前言
在我们不能确定一个元素的高度的时候，要使用transition过渡，是不会触发的，比如一个p标签 内容行数不固定 我们可能就要初始 height: 0 ; 过渡到 height: auto ; 写完发现并不能实现 。
可过渡的样式
不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果
Vstart = 开始值; Vend = 结束值; Vres = 中间值; p = 过渡函数的输出值 Vres = (1 - p) * Vstart + p * Vend 当Vres具有有效值时，则该CSS样式可过渡
2. 解决方法（一个实例）
通过设置max-height 来实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div{ max-height: 0; transition: .8s; overflow: hidden; border: 1px solid #000; } #btn{ width: 50px; text-align: center; margin: 60px; line-height: 30px; border: 2px solid #000; cursor: pointer; } </style> </head> <body> <div id="btn"> 点击我 </div> <div id="div"> asd <br/> asd <br/> asd <br/> asd <br/> asd <br/> </div> <script> btn.onclick = function(){ if(div.on){ div.style.maxHeight = '0px'; div.on = false; }else{ div.style.maxHeight = '300px'; div.on = true; } } </script> </body> </html>
因为max-height是根据内容来撑开高度的，只要max-height 大于正常高度就好了。