How do I get HEIGHT or MAX-HEIGHT to work dynamically with TRANSITION in CSS?
I have an accordion menu, which I would like to open and close smoothly
Although this appears fairly smooth, what in fact is happening is the transition is working over the full 1000px of the max-height and not the actual height.
If you open all the sub-menus of section 5 and then open and close the main section, and then compare that to opening and closing section 1, you will see the apparent latency as you catch the tail-end of the transitions.
Adding "height: auto", or "height: 100%" changes the whole thing to just snap open and closed
Does anyone have any clues please?
Link to my CodePen project: https://codepen.io/iBlackwolf/pen/bGOazwx
Feel free to critique any of my code
5 Replies
transiting height auto is not possible unfortunately, but since there is grid, we can do it by animating the gridrows.
Here a video Kevin made about it
https://www.youtube.com/watch?v=B_n4YONte5A
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-...
awesome, thank you. i shall watch it now 🙂
i can see this working ok with divs, but struggling to translate it to ul and li lol
Ul and li aren’t divs and are made for a different purpose but try and picture them as divs, in that video, the div with the
.quick-example class would be your ul and the div inside would be your li.not quite, did you look at my code? it's my UL that needs to open and close, not the LI
You'll need a dummy wrapper around your ul's to hold the grid as this technique needs for the grid to hold only one item