elTaan elTaan - 8 months ago 55
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 Source

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.