Just one thing : it's best to transition using transform instead of height, max-height, width... for better browser performance
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.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.