Scale can be hardware accelerated, but it doesn’t help with dynamic dimension elements so much.
ie - we have to apply some css class, measure the height of the element, remove the class, then apply a style attribute which can be transitioned. This all happens inside the browser lifecycle, as far as I understand it - meaning that it is possible to measure an element, then before the paint happens, remove the class, apply the new styles and let the browser perform its paint cycle.
This is all a bit … fiddly!
I was looking at some techniques for doing this on a codepen - might be interesting for you too.
Two controls, click on ‘promised’ for a promise based measure / paint, and rAF for a reqAnimFrame approach.