Animate in Ajax’d Content to its Natural Height

Avatar of Chris Coyier
Chris Coyier on

Let’s combine three things we just learned here on CSS-Tricks:

One, transitioning to auto dimensions. Two, Ajaxing for stuff in a modern way. Three, waiting for images to be loaded to measure them.

With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky!

Here’s the final demo:

See the Pen Slide in Ajax Content by Chris Coyier (@chriscoyier) on CodePen.

The thinking here is that since we’re guaranteed to be using JavaScript anyway, since we’re Ajaxing for some content, we might as well keep using JavaScript to help us make a smooth transition.

In the grand tradition of “writing a script”, here’s ours:

  1. Ajax for the stuff
  2. Make a dummy element that is exactly as wide as where you plan to inject the stuff
  3. Inject your stuff into the dummy element
  4. Measure dummy element (carefully)
  5. Inject your stuff into the real (and collapsed) element
  6. Transition the height to the measured height
  7. Clean up after yourself

All the code is commented line-by-line in the demo.