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 ...
Get jQuery Mobile: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.