jQuery Mobile - Transitions
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 −
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.
