Hey Great article.
Your solution for when you don't know the height will delay the transition if for example the max-height is transitioning from a higher value than the actual height there is no noticeable change until the max-height reaches the height of the element.
As of now I haven't discovered a better solution for when you don't know the height.
transition: max-height 5000ms linear;
max-height:1000px; /* if the actual height is 800px it won't
look like it's transitioning for the first 200px */
<div onclick="this.classList.toggle('moved');" id='box'>Moving Box</div>
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.