It allows to change property values which occurs over specified duration and alters behavior of an element from one state to another state by applying different styles for each state.
Following table lists down some of the page transitions used in the jQuery Mobile framework −
| Sr.No. | Transition & Description | For Pages | For Dialogs |
|---|---|---|---|
| 1 | fade You can make elements fade in and out of visibility. | Fade Page | Fade Dialog |
| 2 | flip Flip the elements from back to front to the next page. | Flip Page | Flip Dialog |
| 3 | pop You can create a popup window. | Pop Page | Pop Dialog |
| 4 | flow Display the next page by keeping current page away. | Flow Page | Flow Dialog |
| 5 | slide You can slide the page from right to left. | Slide Page | Slide Dialog |
| 6 | slidefade Slides the page from right to left and fades in the next page. | Slidefade Page | Slidefade Dialog |
| 7 | slideup Slides the page from bottom to up. | Slideup Page | Slideup Dialog |
| 8 | slidedown Slides the page from top to bottom. | Slidedown Page | Slidedown Dialog |
| 9 | turn You can turn to the next page. | Turn Page | Turn Dialog |
| 10 | none You cannot use any transition effect by using this attribute. | None Page | None Dialog |
Setting Transition and Global Configuration
By default, pages will have fade transition in the framework. You can use custom transitions by adding the data-transition attribute to the link. You can use different default transition effects for the page using defaultPageTransition option globally. For dialogs, you can make use of defaultDialogTransition option.
Fallback Transition
All transitions support 3D transformations except the fade transition. The devices which do not support 3D transformation, they will have to make use of fade transition. Some browsers do not support 3D transformations for each transition type, so you can use the fade as default transition fallback.
Max Scroll for Transitions
The transitions are set to none when you are scrolling from or to a page and the scroll position will be three times the height of the device screen. Sometimes, you may get slow in responding or the browser may crash when you click any navigation element; so to avoid this we are using the scroll position for transition by using getMaxScrollForTransition function.
Max Width for Transitions
You can disable the transition when the window width is higher than the pixel width. You can configure the max width for transitions using the $.mobile.maxTransitionWidth global option, which is set to false by default. It takes values such as pixel width or false value, and the transition will be set to none if it is not a false value when the window is higher than the specified value.
Same Page Transition
You can add the transitions to the current page using the allowSamePageTransition option of page container widget’s change() method.
Creating Custom Transitions
You can create the custom transitions in the page using the $.mobile.transitionHandlers option that expands the selection of transitions on the website or application.
Leave a Reply