DEV Community

Using CSS Transitions on the Height Property

Sarah Chima on April 20, 2018

Little effects on our web pages can make a lot of difference on the user experience of a website. When the state of an element is changed, it's pre...
Read full post
Collapse
 
belhassen07 profile image
Belhassen Chelbi •

Just one thing : it's best to transition using transform instead of height, max-height, width... for better browser performance
see csstriggers.com/

Collapse
 
dubyabrian profile image
W. Brian Gourlie • • Edited

To expand on this:

When transitioning height, the DOM has to re-flow (or re-layout) all affected elements. This is computationally expensive considering transitions attempt to animate at 60fps. That's 60 recalculations per second!

With translate, you're only affecting the element's appearance. In other words, translation does not affect layout, as it's applied post-layout.

With that said, this also complicates things. In your example, using translate to animate the text will not re-calculate the button's position, so it's not as simple as animating translate as a drop-in replacement. I actually think your solution is great for most use-cases.

Collapse
 
sarah_chima profile image
Sarah Chima •

Thank you for this comment.

Collapse
 
sarah_chima profile image
Sarah Chima •

Thank you for pointing this out.

Collapse
 
equinusocio profile image
Mattia Astorino •

With max-height you should know the element computed height because if the content have a variable length 1500px may can’t be enough.

If you set a custom property to replace the max-height value, with js you can get the actual element height and change the max-height custom property runtime.

Anyway you should not transitioning height or max-height. Transforming a clip-path property may be more performant. Cheers.

Collapse
 
reegodev profile image
Matteo Rigon •

I'd like to point out a pitfall of the second method: if you have multiple elements that you need to collapse and their heights differs considerably, the animation will seem to "lag" for shorter elements because of their max-height property being much higher than their actual height.
I often use your proposed solution for quick collapses but the only solution if you want perfect collapses involves pure Javascript and Element.scrollHeight property

Collapse
 
sarah_chima profile image
Sarah Chima •

I'm glad you pointed this out

Collapse
 
msommers profile image
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>
Collapse
 
artdrua12 profile image
artdrua12 •

Thank you, Sarah. Your information helped me a lot! :)

Collapse
 
artdrua12 profile image
artdrua12 •

Thank you, Sarah. Your information helped a lot! :)