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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
