elTaan elTaan - 7 days ago 5
CSS Question

Get the upcoming CSS transition properties

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 :)

Answer

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.