I was trying to create a div that slides open vertically and noticed that the transition only works when you define the vertical height in absolute pixels and will not work with percentages.
For example, I have a div that is set to 0px on page load. When a user clicks a button I want that div to expand to 100% height. When I define this as a percentage, the div just opens without a transition. The transition only works when I define it in absolute pixels.
I want to do this as a percentage because I’m planning to duplicate this interaction for several elements on the page – all of which have a different height. If I set it to 100%, I don’t have to duplicate and modify each interaction to the exact pixel (which will change anyway depending on mobile vs desktop). Please see videos below for a better explanation.
Height defined by percentage:
Height defined by pixels: