Page Transition Plugins

Overview

The jQuery Mobile (post 1.0a4.1) page transitions code was modified to allow developers to create their own custom transitions and/or override existing transitions. This document describes how a developer can create his/her own custom CSS3 or JavaScript based transitions.

Pure CSS3 Based Transitions

Up until jQuery Mobile 1.0a4.1, the only way to add a custom page transition was to implement it via CSS, leveraging CSS3 transitions or animation keyframes. To add a new CSS transition all you had to do was select a class name, for example "slide" for your transition, then define your "in" and "out" CSS rules to take advantage of transitions or animation keyframes:

.slide.in {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromright;
}

.slide.out {
    -webkit-transform: translateX(-100%);
    -webkit-animation-name: slideouttoleft;
}

@-webkit-keyframes slideinfromright {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-100%); }
}

If your transition supported a reverse direction, those rules would also need to be defined using the "reverse" class:

.slide.in.reverse {
    -webkit-transform: translateX(0);
    -webkit-animation-name: slideinfromleft;
}

.slide.out.reverse {
    -webkit-transform: translateX(100%);
    -webkit-animation-name: slideouttoright;
}

@-webkit-keyframes slideinfromleft {
    from { -webkit-transform: translateX(-100%); }
    to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideouttoright {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(100%); }
}

Then, all that was left to do was instantiate the transition by using its name in the @data-transition attribute of a navigation link:

<a href="#page2" data-transition="slide">Page 2</a>

JavaScript Based Transitions

Transition Handlers

$.mobile.transitionHandlers

$.mobile.transitionHandlers is a dictionary of named transition handlers. The keys for this dictionary are the names of custom transitions. These names are the same names you would specify within a @data-transition attribute on a navigation link. The handler stored at that key has

By default, there is only one handler called "none" within this dictionary.