Animate page reflow?
I am switching the contents of divs (fading old contents out, then fading new contents in) and because they are slightly different contents, the moment they change there is a jarring reorganization of everything below them.
My question is, is there a way to make this movement smooth?
Is there perhaps a way to get this without specifying explicit dimensions? I seem to recall at some point having experienced items getting moved around the page in an animated fashion. This gives me hope that it could be done using just CSS.
I'd normally create a temporary (invisible) element holding new content so as to calculate its height. After that, the original element can be animated from its current height to the newly calculated height.
It is important that the temporary element created is an identical sibling of the original element so that all the necessary styles cascade and get inherited correctly (for instance, calculating new content height is useless if it doesn't have correct
While animating between different heights set explicitly (i.e. with JS as described above) can be accomplished with CSS3 (
transition: height .5s ease;), it will not work for different heights set implicitly (i.e. modifying element content with
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here