问题来自一个很常见的功能需求： 点击显示更多。为了实现这样的功能需要把元素的初始 CSS 样式设置为一个固定的高度，一般情况下是一行的高度。然后设置overflow: hidden; 当要显示全部文字时就给元素加上一个 height:auto; 此时元素就会根据内部内容自动计算高度并显示全部内容。但是，这样就会有一个问题，此时的高度变换是不会有动画效果的，无论有没有设置 transition: all .3s; 元素就是不会有动画效果，因为 height: auto; 不是一个有效的过渡函数结束值。
为了解决这个问题，我们必须要给transition 函数一个有效的结束值。而transition 函数所有支持的属性如下：（参考链接：深入理解CSS 属性）
颜色: color background-color border-color outline-color
位置: background-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
由于我们需要让高度变换具有动画效果，而又不能给出一个具体的高度值，所以可以设置一个max-height, 此时这个max-height 必须要根据具体的情况来设置一个足够安全的值，如果太小了会导致内容显示不全。但是也不能太大，例如，如果设置了max-height:1000px;transition: max-height 1s; 而元素内容的高度只有100px 那么前900毫秒用户是看不到任何动画效果的感觉就像是页面卡住了一样。所以这个值必须要适当才行，根据经验可以比预估的最大高度大个100-200px，过渡动画的时间设置为 0.3s 此时的既有动画效果，用户也基本上感觉不到延迟。
原文：https://www.cnblogs.com/nunts-yzy/p/11978034.html