Discussion on: Using CSS Transitions on the Height Property

[Moe S]

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.

 #box{
            max-height:10px;
            background: green;
            transition: max-height 5000ms linear;
            overflow: hidden;
         }

         #box.moved{
            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>