The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:
+The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation:
+ + + +fade |
+ dialog | +page | +
|---|---|---|
pop |
+ dialog | +page | +
flip |
+ dialog | +page | +
turn |
+ dialog | +page | +
flow |
+ dialog | +page | +
slide |
+ dialog | +page | +
slideup |
+ dialog | +page | +
slidedown |
+ dialog | +page | +
none |
+ dialog | +page | +
Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.
- -NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.
+NOTE: To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support will fallback to "fade" for all transition types. This behavior is configurable (see below).
+Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.
By default, the framework applies the right to left slide transition. To set a custom transition effect, add the data-transition attribute to the link.
By default, the framework applies a fade transition. To set a custom transition effect, add the data-transition attribute to the link.
<a href="index.html" data-transition="pop">I'll pop</a>
When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the data-direction="reverse" attribute to a link. Note: (this was formerly data-back="true", which will remain supported until 1.0)
For smoother page transitions, consider enabling the touchOverflow feature.
- +Set the defaultPageTransition global option if you'd prefer a different default transition. Dialogs have a different option called defaultDialogTransition that can also set configured.
All transitions are built with CSS keyframe animations and include both -webkit vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers and -moz rules for Firefox browsers. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.
By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.
+ +The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":
+$.mobile.fallbackTransition.slideout = "none"
+
+ By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option $.mobile.maxTransitionWidth, which defaults to false. The option accepts any number representing a pixel width or false value. If it's not false, the handler will use a "none" transition when the window width is wider than the specified value.
During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above.
+During a CSS-based page transition, jQuery Mobile will place the class name of the transition on both the "from" and "to" pages involved in the transition. It then places an "out" class on the "from" page, and "in" class on the "to" page. The presence of these classes on the "from" and "to" page elements then triggers the animation CSS rules defined above. As of jQuery Mobile version 1.1, animation class additions are queued, rather than simultaneous, producing an out-then-in sequence, which is friendlier for mobile rendering than our previous simultaneous transition sequence.
If your transition supports a reverse direction, you need to create CSS rules that use the reverse class in addition to the transition class name and the "in" and "out" classes:
In case you were wondering why none of the CSS rules above specified any easing or duration, it's because the CSS for jQuery Mobile defines the default easing and duration in the following rules:
-.in, .out {
- -webkit-animation-timing-function: ease-in-out;
- -webkit-animation-duration: 350ms;
+.in {
+ -webkit-animation-timing-function: ease-out;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-timing-function: ease-out;
+ -moz-animation-duration: 350ms;
+}
+
+.out {
+ -webkit-animation-timing-function: ease-in;
+ -webkit-animation-duration: 225ms;
+ -moz-animation-timing-function: ease-in;
+ -moz-animation-duration: 225;
}
After the new page is loaded, the $.mobile.transitionHandlers dictionary is used to see if any transition handler function is registered for the given transition name. If a handler is found, that handler is invoked to start and manage the transition. If no handler is found the handler specified by the configuration option $.mobile.defaultTransitionHandler is invoked.
By default, the $.mobile.transitionHandlers dictionary is only populated with a single handler entry called "none". This handler simply removes the "ui-page-active" class from the page we are transitioning "from", and places it on the page we are transitioning "to". The transition is instantaneous; no animation, no fanfare.
By default, the $.mobile.transitionHandlers dictionary is only populated with a single handler entry called "default". This handler plays a dual purpose of either executing a "none" transition, which removes the "ui-page-active" class from the page we are transitioning "from", and places it on the page we are transitioning "to", or a Queued CSS3 Animated Transition, such as the one explained above. If the transition is "none", it will be instantaneous; no animation, no fanfare.
The $.defaultTransitionHandler points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.
The $.mobile.defaultTransitionHandler points to a handler function that assumes the name is a CSS class name, and implements the "Pure CSS3 Based Transitions" section above.
Both the "none" and "css3" transition handlers are available off of the $.mobile namespace:
+The default transition handler is available on the $.mobile namespace:
-$.mobile.noneTransitionHandler
-$.mobile.css3TransitionHandler
+$.mobile.transitionHandlers[ "default" ];
Once you do this, your handler will be invoked any time a transition name is used but not found within the $.mobile.transitionHandlers dictionary.
Transition handlers involve a number of critical operations, such as hiding any existing page, showing the new page, scrolling either to the top or a remembered scroll position on that new page, setting focus on the new page, and any animation and timing sequences you'd like to add. During development, we would recommend using jquery.mobile.transitions.js as a coding reference.
One of the key things jQuery Mobile does is store your scroll position before starting a transition so it can restore you to the same place once you return to the page when hitting the Back button or closing a dialog. Here are the same buttons from the top to test the scrolling logic.
+ + +fade |
+ dialog | +page | +
|---|---|---|
pop |
+ dialog | +page | +
flip |
+ dialog | +page | +
turn |
+ dialog | +page | +
flow |
+ dialog | +page | +
slide |
+ dialog | +page | +
slideup |
+ dialog | +page | +
slidedown |
+ dialog | +page | +
none |
+ dialog | +page | +
That was an animated page transition effect that we added with a data-transition attribute on the link.
Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.
-What do you think?
- I like it +That was an animated page transition effect to a dialog that we added with a data-transition attribute on the link.
Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.
+ + Take me backThat was an animated page transition effect to a page that we added with a data-transition attribute on the link. This uses a different background theme swatch to see how that looks with the transitions.
Since it uses CSS animations, this should be hardware accelerated on many devices. To see transitions, 3D transform support is required so if you only saw a fade transition that's the reason.
+ + + Take me back +