Geek asks and answers

Page animation?

I switch the content of the divs (fading the old content, then disappearing into the new content), and because they are slightly different from the content, at the moment of their change, there is a sharp reorganization of everything below them.

My question is, is there a way to make this movement smooth?

I suspect that almost the only way to do this is to use javascript to determine in advance what heights (in my case, I only deal with blocks where there are vertical alignment shifts) of the start and end elements, and assign these values ​​directly. As soon as I do this, I'm sure the CSS3 transition will apply some nice animation.

Is there any way to get this without specifying explicit measurements? I seem to recall at some point when experienced items move around the page in an animated manner. This gives me hope that this can be done using only CSS.

+5
source share
1 answer

Usually I create a temporary (invisible) element containing new content in order to calculate its height. After that, the source element can be animated from the current height to the new calculated height.

It is important that the created temporary element be identical to the related source element, so that all necessary styles are cascaded and inherited correctly (for example, calculating the height of new content is useless if it does not have the correct value font-size)

, (.. JS, ), CSS3 (transition: height .5s ease;), , (.. height:auto)

+2

More articles:


All Articles