A very common question from functional requirements: Click Show more. In order to realize such a function requires an initial CSS style element to a fixed height, it is generally a line height. Then set the overflow: hidden; when give to show the full text elements plus a height: auto; case element automatically calculates and displays the content according to the internal height of the entire contents. However, this will be a problem, at this time there will be no transformation is highly animated, with or without setting transition: all .3s; there will be no element is the animation, because height: auto; not an effective transition function end value.
To solve this problem, we have to give a valid transition function of end value. The transition function of all the supported attributes as follows :( reference links: in-depth understanding of CSS properties )
颜色: 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
Since we need to transform highly animated, and who can not give a specific height value, so you can set a max-height, this time the max-height must be sufficient to set the value of a security based on the specific circumstances, if too small will cause the content to display incomplete. But not too much, for example, if you set the max-height: 1000px; transition: max-height 1s; and the height of the element content of only 900 milliseconds before 100px so the user can not see any sense of animation is like a page card I stayed the same. So this value must be appropriate for the job can be compared to the estimated maximum height of the big 100-200px, transition animation time is set to 0.3s at this time both the animation, users basically do not feel the delay based on experience.