loading...

re: Using CSS Transitions on the Height Property VIEW POST

FULL DISCUSSION
 

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>
code of conduct - report abuse