I'm building an interface with React, and I'd like to get the properties of div container (clientWidth and clientHeight) after I changed a class.
The main problem is that there is a CSS transition of 0.2s for the width/height properties, so whenever I try to detect a (future) DOM modification thanks to React (with componentDidMount) or with a MutationObserver, I'm getting the clientWidth and clientHeight right before the transition starts.
Ideally, I'd like to get the properties that are about to be applied after the transition so I could re-render sub-components and give them the future width/height they need.
Is there any good way to do this?
I thank you in advance :)
You can write a trigger for css transition end: https://davidwalsh.name/css-animation-callback
So you can wait with the height and width detection till this event is triggered.