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 of your own, all you have to do is select a class name that corresponds to the name of your transition, for example "slide", and 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%); }
}

During a CSS based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. I then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.

If your transition supports a reverse direction, you will need to create CSS rules that use the "reverse" class in addition to the transition class name and the "in" and "out" classes:

.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%); }
}

After you rules are in place, you simply specify the name of your transition within the @data-transition attribute of a navigation link:

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

When the user clicks on the navigation link, jQuery Mobile will then invoke your transition when it navigates to the page mentioned within the link.

In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:

.in, .out {
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
}

If you need to specify a different easing or duration, simply add the appropriate CSS3 property to your custom page transition rules.

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.