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 transition was to implement it via CSS transitions and animations. To add a new CSS transition all you had to do was select a class name for your transition, define your CSS rules to take advantage of transitions or animation keyframes, and then use that class name within an @data-transitions attribute. All of the built-in jQuery Mobile transitions are implemented in this way.

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.