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.
Just one thing : it's best to transition using transform instead of height, max-height, width... for better browser performance
see csstriggers.com/
Thank you for pointing this out.
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.
Thank you for this comment.