How To Implement Transition from fixed pixel to percentage

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuchuji/article/details/82977805

In web development, we might encounter the situation to animate width/height from a fixed pixel length to a percentage length. If you set height: 20px and animate to height: 100% or height: auto, the transition will not work and you will just get a height flicking, even though you use jquery or other libraries as a helper tool. Because height: 100% and height: auto calculate the height itself based on its parent element, the parent element will wrap the child element thus has the same height as child element.
Here we work out a tricky solution: wrap the rendered element (we could only get its dimension only after it’s rendered), set the wrapper’s height to a fixed height and temperarily hide the child’s overflown part with overflow: hidden, then animate wrapper’s height to the child’s height as we could calculate its dimension. The process is illustrated as following: