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 −

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.