Animate in Ajax’d Content to its Natural Height
Lets combine three things we just learned here on CSS-Tricks:
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!
Heres the final demo:
In the grand tradition of “writing a script“, heres ours:
- Ajax for the stuff
- Make a dummy element that is exactly as wide as where you plan to inject the stuff
- Inject your stuff into the dummy element
- Measure dummy element (carefully)
- Inject your stuff into the real (and collapsed) element
- Transition the height to the measured height
- Clean up after yourself
All the code is commented line-by-line in the demo.