Hierarchy of JS Transition

Today, I would like to talk about the importance of learning this hierarchy of transition particularly those whom are doing animation on web. Ever wonder why animation as simple as your animated gif can sometimes get stucked, stop animating or animation gets cut off abruptly?

Well to understand this, we must understand the hierarchy of transitions in javascript animation.

Alert/Confirm > Transition > Rendering

In all browser based animation noticed that, the alert or prompt (except the new windows 8 phone platform where their alert is synchronous) always kills any form of transition, if you have a callback on animation waiting at the end, be sure do not use alert/confirm for testing. Use console or some other means of div popups alternative if you need to do so.

For each transition of screen, also locks individual rendering on items like spinner gif files for example. So, be sure you re-render or make them appear only when you are sure all animation are done. Just remember this rule well, that the higher the rank in hierarchy, gets more rendering attention than the lower and you will do just fine. ;)