jQuery Mobile: Up and Running

Custom Transitions

In Chapter 3 we have already mentioned all the possible transitions available in jQuery Mobile 1.0. Can we define our own transitions? Yes we can, and there are two ways:

• Using CSS3 animations

• Using JavaScript

When we define a data-transition attribute (or by applying a transition from JavaScript), jQuery Mobile first verifies if the name is one of the transitions available in the framework. If not, it looks inside a collection called $.mobile.transitionHandlers. If the transition is unknown and not defined in the collection, a default transition is used.

The default transition can be changed, and must be defined as a handler function. By default, the fallback transition is mapped to a custom transition that must be defined in CSS3 animations (see next chapter).

We can also map the default transition to $.mobile.noneTransitionHandler, which basically shows the new page and hides the previous page without any animation.

For example, we can add an explode transition type:

$.mobile.transitionHandlers.explode = explodeTransitionHandler;

We can also change the default transition and then use whatever name we want using the same handler:

$.mobile.defaultTransitionHandler = explodeTransitionHandler;

A transition handler is a JavaScript function that will receive four arguments:

• Name of the transition

• reverse, which when set to true, indicates when the transition should occur in reverse

• toPage, which is a jQuery DOM object of the destination page

• fromPage, which is a jQuery DOM object ...