jQuery Mobile Transition
jQuery Mobile contains CSS3 effect allows you to select the page to open the way.
jQuery Mobile page transitions
jQuery Mobile provides a variety of page switch to the next page of results.
Note: In order to achieve the effect of switching the page, the browser must support CSS3 3D switching:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Figures in the table to support 3D rotating minimum browser version number.
Page transition effects can be applied to any use of data-transition attribute link or form:
Page transition effects can be applied to any use of data-transition attribute link or form submission:
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
The following table shows the data-transition through the use of available properties to switch the page:
| transition | description | page | Dialog |
|---|---|---|---|
| fade | default. Fade to the next page | try it | try it |
| flip | From flip forward to the next page | try it | try it |
| flow | Throws this page to the next page | try it | try it |
| pop | Like pop-ups that go to the next page. | try it | try it |
| slide | Swipe from the right to the next page. | try it | try it |
| slidefade | Swipe left and right to fade to the next page. | try it | try it |
| slideup | Slide from bottom to top to the next page. | try it | try it |
| slidedown | Top to bottom, slide to the next. | try it | try it |
| turn | Turn the next page. | try it | try it |
| none | No transition effect. | try it | try it |
 | All jQuery Mobile link on the default fade effect (if the browser supports). |
|---|
Note: All the above effects support backward behavior. For example, if you want to slide the page from left to right, right to left instead of sliding, use data-direction property with the "reverse" value. On the Back button which is the default.