Transitions

Home

Page transitions

The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.

To set a custom transition effect, add the data-transition attribute to the link. Possible values include:

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

slide slideup slidedown pop fade flip *

NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.

In addition, you can also force a "backwards" transition by specifying data-direction="reverse" on your link. Note: (this was formerly data-back="true", which will remain supported until 1.0)

Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.

Ta-da!

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

Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.

What do you think?

I like it