Use offsetHeight to force redraw between CSS transition changes

Often when using CSS transitions, I need to manipulate the same elements sometimes with transitions and sometimes without.

A simple example is moving an element off the page immediately, then transitioning it back in. Due to browsers compressing property changes behind the scenes, simply adding a “noAnimate” (transition: none) class, setting left, removing the class, then setting left again results in the element being in the right place, but without any transition.

I was previously told that the solution was to put the last two steps in a setTimeout callback – and that works. However the code quickly becomes messy in non-trivial situations. While reading today, I found that all that needs to be done is to force a redraw in between, which can be done by accessing the element’s offsetHeight.

Example here:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s