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 reversetoPage, which is a jQuery DOM object of the destination pagefromPage, which is a jQuery DOM object ...