# Transitions

Home Search

## Page transitions

The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:

### fade | dialog | page
### pop | dialog | page
### flip | dialog | page
### turn | dialog | page
### flow | dialog | page
### slide | dialog | page
### slideup | dialog | page
### slidedown | dialog | page
### none | dialog | page

Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).

Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

## Setting a transition on a link or form submit

By default, the framework applies a fade transition. To set a custom transition effect, add the `data-transition` attribute to the link.

``<a href="index.html" data-transition="pop">I'll pop</a>``

When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the `data-direction="reverse"` attribute to a link. Note: (this was formerly `data-back="true"`, which will remain supported until 1.0)

## Global configuration of transitions

Set the `defaultPageTransition` global option if you'd prefer a different default transition. Dialogs have a different option called `defaultDialogTransition` that can also set configured.

## Browser support and performance

All transitions are built with CSS keyframe animations and include both `-webkit` vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and `-moz` rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.

## Defining fallback transitions for non-3D support

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

`$.mobile.fallbackTransition.slideout = "none"`

## Setting a max width for transitions

By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option `$.mobile.maxTransitionWidth`, which defaults to `false`. The option accepts any number representing a pixel width or `false` value. If it's not `false`, the handler will use a "none" transition when the window width is wider than the specified value.

## Creating custom transitions

jQuery Mobile allows for the addition of custom transitions to the `$.mobile.transitionHandlers` dictionary so you can expand the selection of transitions on your site or app.

### More in this section

- Pages & Dialogs
- Anatomy of a page
- Single page template
- Multi-page template
- Page titles
- Linking pages
- Page transitions
- Dialogs
- Prefetching & caching pages
- Ajax, hashes & history
- Dynamically injecting pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages

# Dialog

That was an animated page transition effect to a dialog that we added with a `data-transition` attribute on the link.

Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.

Take me back

# Page

That was an animated page transition effect to a page that we added with a `data-transition` attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.

Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.

## Here's a few form elements

These are here to see if this slows down rendering.

Text Input:
Textarea:
Flip switch:
Slider:
Take me back
Search: