I am working on an animation library, where the user can input some style changes and they will be animated. This happens mostly via the FLIP animation technique, where I need the element's dimensions before and after a certain style/class change (you can read more about it on css-tricks).

BUT it fails when the resulting style change makes the element have a height or width of 0. It would be good to know that beforehand, so I was wondering: is there a way to "preview" a style/class change made to a DOM element before actually applying them?

I am currently doing it like this:

• get the dimension via getClientBoundingRect()
• add the user's style to the element
• read the dimensions again
• remove the style changes so we are back to normal

This is working fine and it's happening so fast, that you cant see it but I don't know a) how many elements I need to read like this and b) I also don't know many style-change-steps there are (think like from: style abc to to: style xyz which could involve 2 possibilities for a resulting height/width of 0).

I am already seeing some frame drops because there are at least 4 repaints happening and I don't know if the browser can keep batching these together if there are even more elements/change-steps and/or the device is not that performant.

I was thinking about copying the affected elements and adding them to the DOM (somewhere hidden) but since the parent (and grandparent) elements could affect the layout, I would basically need to copy and mount the whole element tree, which could be huge...

Any ideas?