Transitions
Description
jQuery Mobile has six CSS-based transition effects to choose from when transitioning between pages.
By default, the framework will apply a "slide" effect for all transitions. We can set an alternate transition by adding the data-transition attribute to any link, button, or form:
<a href="dialog.html" data-transition="slideup">Show Dialog</a>
The complete list of transition effects are described in the following table.
- slide - This is the default transition for all links.
- slideup - A common transition for opening dialogs or showing additional information.
- slidedown - The inverse of slideup but can be used for a similar effect.
- pop - For opening dialogs or showing additional information.
- fade - A common transition effect for entry or exit pages.
- flip - A common transition for showing additional information.
- none - No transition will be applied.