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:
- 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.
This is great! I might be too sick to be commenting at the moment, but after a cursory look, wouldn’t this be a good place for the FLIP technique, since you’re already gathering height data? https://aerotwist.com/blog/flip-your-animations/
Just a thought. Great article! Short and useful.
On line 23 in the Javascript, you need to add a ‘px’ suffix so that the width is actually set:
testerElement.style.width = adZone.offsetWidth + 'px';Otherwise the height calculation is coming back way too big. Not a huge deal if you’re animating
max-height, but worth noting.You could use custom properties (if it’s a possibility), and keep the animation in the css.
Here’s a quick hack of your example.
If the demo doesn’t seem to be working for you, try turning off your ad blocker.
It must see the keyword ‘ad’ in the code and assumes this is a legitimate advertisement.
The technique is sound, but I just want to chime in and say that I find this to be the most annoying practice on the web today.
I enjoy reading content. I accept the deal that ads are what help bring me that content. Developers seem to be trying to find ways to make that reading harder. Don’t move things I’m reading.
I scroll to a point where I can read the next paragraph, then you wait up to a few seconds while loading some ad behind the scenes, after which you move what I was reading. I lose where I was up to.
I look around for a few seconds and find where I was up to again. Get a line or two further in and, BOOM, you remove the ad and move what I was reading again.
I can’t imagine staying calm while someone kept shoving my newspaper up and down while I’m reading because they have something they want to show me.