Ephemeral padding when animating grid row height
Following the approach here to animate height from "0" to "auto": https://www.youtube.com/watch?v=B_n4YONte5A. It's a neat trick avoiding JS, but I'm wondering what's going on with the white-space at the bottom in this screen recording (the orange section is the grid-row that's animating from "0fr" to "1fr"), and if there's any way to get rid of it.
Kevin Powell
YouTube
The simple trick to transition from height 0 to auto with CSS
Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement!
🔗 Links
✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
8 Replies
Compare to using FLIP in JS
Codepen here https://codepen.io/ptrfrncsmrph-the-vuer/pen/poBaoZr
I had someone else ask me something about this awhile ago and, as far as I could figure, it's as if the timing-functions are different, but there's no way to change the timing of inner things, as it's just following the expansion and doing it's own thing.
If there's a workaround for this, I haven't figured it out
Yeah it does seem like a different timing-function, though I tried using a few different timing-functions on the animation and haven't been able to get it to match the inner animation timing 🤷♂️ it's a mystery...
Adding
align-items: start; to the parent grid element should resolve the issue (which interestingly doesn't happen on Firefox)
It's a neat trick avoiding JS,But you are using JS to toggle it 😉 If you want a true CSS only solution you should use a hidden radio button or checkbox.
Adding align-items: start; to the parent grid element
🎯 That works, thanks! I was considering not using this technique even though it's the simplest, just because of that odd behavior. May I ask how you knew that, or how you figured it out?
If you want a true CSS only solution you should use a hidden radio button or checkbox.Good point. The above codepen was just a scratchpad, but ultimately I was going to use something like this for expandable list items, basically an accordion pattern. My first thought was to use
<details> to track expanded state in the DOM, but I don't think I can unfortunately, because the <summary> section contains heading(s). I hadn't considered using checkboxes.Just in case it is any use, I have put together a quick demo using hidden checkboxes.
It includes 3 methods but they are basically the same:
https://codepen.io/cbolson/pen/eYoVMmg
Note - with the checkbox method, if you want to only have one open at the same time, just swap the checkboxes for radio buttons and ensure that they all have the same name.
oh, that's so interesting! I'd love to know why that works... lol. Must be something with how
stretch is calculated? 🤔