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: http://jsfiddle.net/nzW24/