The blog list on the home page shows six posts, and a button underneath brings in the rest.
They just appeared. I wanted them to fade in, with everything below sliding down to make room.
That is more work than it sounds. You have to measure where everything sits, make the change, measure again, put it all back where it started, and only then let it move. It's the sort of job people install a library for, and I think that's mostly why so few sites bother.
The fix...
The browser will do it. You hand it the function that makes the change:
document.startViewTransition(showMore);It takes a picture of the page, runs your function, takes another picture, and fades between the two. Anything that moved, moves. I measured nothing.
Two things worth knowing. Not every browser has it yet, so check it's there and just call your function directly if it isn't. And if somebody has asked their machine to go easy on animation, skip it and let the change happen.