loading...

re: Using CSS Transitions on the Height Property VIEW POST

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

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.

 
code of conduct - report abuse