Well, reverting back to the jQuery Mobile 1.0.1 transitions isn’t really “fixing” things per say but…<\/p>\n
A very hot topic in the community are the improved page transitions effects included in jQuery Mobile’s 1.1.0 release. In the previous major release 1.0.1, these page animations – slide, slideup, flip, pop – performed poorly on certain Android devices. To improve transition effects for devices overall, the developers moved to a two step process. All animations are now queued to first perform the pageOut sequence and then the pageIn sequence. <\/p>\n
This effect creates a noticable break in the previously smoother animations, but the performance is greatly improved on smaller devices, so the tradeoff is considered good. To help mask a bit of this break, a fade effect was added, which unfortunately for some has created a noticeable flash effect.<\/p>\n
Anyhow, that is all good, but for us that don’t care to support these slower devices, the older page transitions from jQuery Mobile 1.0.1 are much nicer to the eye. How do we revert things back without resorting to using the older version? It’s actually pretty simple once I started digging around.<\/p>\n
First, we need to tell jQuery Mobile’s javascript function to run both the pageOut and pageIn functions at the same time. This is rather easy. [code] $(document).bind(“mobileinit”, function(){ \t\tvar deferred = new $.Deferred(), \t\t\t\twindow.scrollTo( 0, toScroll );<\/p>\n \t\t\t\t\/\/ reenable scrollstart listening like silentScroll would \t\t\t\t\/\/ Set the from page’s height and start it transitioning out \t\t\tdoneOut = function() {<\/p>\n \t\t\t\tif ( $from && sequential ) { \t\t\t\tstartIn(); \t\t\tstartIn = function(){ \t\t\t\t\/\/ Send focus to page as it is now display: block \t\t\t\t\/\/ Set to page height \t\t\t\tscrollPage(); \t\t\t\t$to.addClass( name + ” in” + reverseClass );<\/p>\n \t\t\t\tif( none ){ \t\t\t},<\/p>\n \t\t\tdoneIn = function() {<\/p>\n \t\t\t\tif ( !sequential ) {<\/p>\n \t\t\t\t\tif( $from ){ \t\t\t\t$to \t\t\t\ttoggleViewportClass();<\/p>\n \t\t\t\t\/\/ In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition \t\t\t\tdeferred.resolve( name, reverse, $to, $from, true ); \t\ttoggleViewportClass();<\/p>\n \t\tif ( $from && !none ) { \t\treturn deferred.promise(); Now all we need to do is override all the new CSS animations with the ones from the old 1.0.1 CSS file. <\/p>\n [code]@charset “utf-8”; .in, .out { .slide.out { .slide.in { .slide.out.reverse { .slide.in.reverse { .slideup.out { .slideup.in { .slideup.in.reverse { .slideup.out.reverse { .slidedown.out { .slidedown.in { .slidedown.in.reverse { .slidedown.out.reverse { @-webkit-keyframes slideinfromright { @-webkit-keyframes slideinfromleft { @-webkit-keyframes slideouttoleft { @-webkit-keyframes slideouttoright { @-webkit-keyframes slideinfromtop { @-webkit-keyframes slideinfrombottom { @-webkit-keyframes slideouttobottom { @-webkit-keyframes slideouttotop { @-webkit-keyframes fadeout { .fade.out { .fade.in { \/* The properties in this rule are only necessary for the ‘flip’ transition. .ui-mobile-viewport-transitioning, .flip { .flip.out { .flip.in { \/* Shake it all about *\/<\/p>\n .flip.out.reverse { .flip.in.reverse { @-webkit-keyframes flipinfromright { @-webkit-keyframes flipinfromleft { @-webkit-keyframes flipouttoleft { @-webkit-keyframes flipouttoright { \/* Hackish, but reliable. *\/<\/p>\n @-webkit-keyframes dontmove { .pop { .pop.in { .pop.in.reverse { .pop.out.reverse { @-webkit-keyframes popin { @-webkit-keyframes popout { I dropped them in a file called jquery.mobile-1.0.1.transitions.css. Now include everything in the HTML header. Order matters!<\/p>\n [code]\n\nOpen jquery.mobile-1.1.0.js and scroll down to the createHandler function on line 2181 and add:<\/del>. Copy and paste the following Javascript into a js file. I called mine utility.js.<\/p>\n
\n$(document).bind( “mobileinit”, function(event) {
\n\t$.mobile.transitionHandlers = { “default” : $.mobile.defaultTransitionHandler };
\n});<\/p>\n
\n\t$.mobile.defaultTransitionHandler = function( name, reverse, $to, $from ) {<\/p>\n
\n\t\t\tsequential = false,
\n\t\t\treverseClass = reverse ? ” reverse” : “”,
\n\t\t\tactive\t= $.mobile.urlHistory.getActive(),
\n\t\t\ttoScroll = active.lastScroll || $.mobile.defaultHomeScroll,
\n\t\t\tscreenHeight = $.mobile.getScreenHeight(),
\n\t\t\tmaxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
\n\t\t\tnone = !$.support.cssTransitions || maxTransitionOverride || !name || name === “none”,
\n\t\t\ttoggleViewportClass = function(){
\n\t\t\t\t$.mobile.pageContainer.toggleClass( “ui-mobile-viewport-transitioning viewport-” + name );
\n\t\t\t},
\n\t\t\tscrollPage = function(){
\n\t\t\t\t\/\/ By using scrollTo instead of silentScroll, we can keep things better in order
\n\t\t\t\t\/\/ Just to be precautios, disable scrollstart listening like silentScroll would
\n\t\t\t\t$.event.special.scrollstart.enabled = false;<\/p>\n
\n\t\t\t\tsetTimeout(function() {
\n\t\t\t\t\t$.event.special.scrollstart.enabled = true;
\n\t\t\t\t}, 150 );
\n\t\t\t},
\n\t\t\tcleanFrom = function(){
\n\t\t\t\t$from
\n\t\t\t\t\t.removeClass( $.mobile.activePageClass + ” out in reverse ” + name )
\n\t\t\t\t\t.height( “” );
\n\t\t\t},
\n\t\t\tstartOut = function(){
\n\t\t\t\t\/\/ if it’s not sequential, call the doneOut transition to start the TO page animating in simultaneously
\n\t\t\t\tif( !sequential ){
\n\t\t\t\t\tdoneOut();
\n\t\t\t\t}
\n\t\t\t\telse {
\n\t\t\t\t\t$from.animationComplete( doneOut );
\n\t\t\t\t}<\/p>\n
\n\t\t\t\t\/\/ Note: setting an explicit height helps eliminate tiling in the transitions
\n\t\t\t\t$from
\n\t\t\t\t\t.height( screenHeight + $(window ).scrollTop() )
\n\t\t\t\t\t.addClass( name + ” out” + reverseClass );
\n\t\t\t},<\/p>\n
\n\t\t\t\t\tcleanFrom();
\n\t\t\t\t}<\/p>\n
\n\t\t\t},<\/p>\n
\n\t\t\t\t$to.css(“z-index”, -10);
\n\t\t\t\t$to.addClass( $.mobile.activePageClass );\t\t\t\t<\/p>\n
\n\t\t\t\t$.mobile.focusPage( $to );<\/p>\n
\n\t\t\t\t$to.height( screenHeight + toScroll );<\/p>\n
\n\t\t\t\t$to.css(“z-index”, “”);
\n\t\t\t\tif( !none ){
\n\t\t\t\t\t$to.animationComplete( doneIn );
\n\t\t\t\t}<\/p>\n
\n\t\t\t\t\tdoneIn();
\n\t\t\t\t}<\/p>\n
\n\t\t\t\t\t\tcleanFrom();
\n\t\t\t\t\t}
\n\t\t\t\t}<\/p>\n
\n\t\t\t\t\t.removeClass( “out in reverse ” + name )
\n\t\t\t\t\t.height( “” );<\/p>\n
\n\t\t\t\t\/\/ This ensures we jump to that spot after the fact, if we aren’t there already.
\n\t\t\t\tif( $( window ).scrollTop() !== toScroll ){
\n\t\t\t\t\tscrollPage();
\n\t\t\t\t}<\/p>\n
\n\t\t\t};<\/p>\n
\n\t\t\tstartOut();
\n\t\t}
\n\t\telse {
\n\t\t\tdoneOut();
\n\t\t}<\/p>\n
\n\t};
\n\t$.extend($.mobile, {
\n\t\tdefaultPageTransition: “slide”,
\n\t\tloadingMessage: “Loading, Please Wait…”
\n\t});
\n});[\/code]<\/p>\n
\n\/* CSS Document *\/
\n\/* Transitions from jQtouch (with small modifications): http:\/\/www.jqtouch.com\/
\nBuilt by David Kaneda and maintained by Jonathan Stark.
\nStripped out of jQuery Mobile 1.0.1 by Stephen “zSprawl” Russell.
\n*\/<\/p>\n
\n\t-webkit-animation-timing-function: ease-in-out;
\n\t-webkit-animation-duration: 350ms;
\n}<\/p>\n
\n\t-webkit-transform: translateX(-100%);
\n\t-webkit-animation-name: slideouttoleft;
\n}<\/p>\n
\n\t-webkit-transform: translateX(0);
\n\t-webkit-animation-name: slideinfromright;
\n}<\/p>\n
\n\t-webkit-transform: translateX(100%);
\n\t-webkit-animation-name: slideouttoright;
\n}<\/p>\n
\n\t-webkit-transform: translateX(0);
\n\t-webkit-animation-name: slideinfromleft;
\n}<\/p>\n
\n\t-webkit-animation-name: dontmove;
\n\tz-index: 0;
\n}<\/p>\n
\n\t-webkit-transform: translateY(0);
\n\t-webkit-animation-name: slideinfrombottom;
\n\tz-index: 10;
\n}<\/p>\n
\n\tz-index: 0;
\n\t-webkit-animation-name: dontmove;
\n}<\/p>\n
\n\t-webkit-transform: translateY(100%);
\n\tz-index: 10;
\n\t-webkit-animation-name: slideouttobottom;
\n}<\/p>\n
\n\t-webkit-animation-name: dontmove;
\n\tz-index: 0;
\n}<\/p>\n
\n\t-webkit-transform: translateY(0);
\n\t-webkit-animation-name: slideinfromtop;
\n\tz-index: 10;
\n}<\/p>\n
\n\tz-index: 0;
\n\t-webkit-animation-name: dontmove;
\n}<\/p>\n
\n\t-webkit-transform: translateY(-100%);
\n\tz-index: 10;
\n\t-webkit-animation-name: slideouttotop;
\n}<\/p>\n
\n from { -webkit-transform: translateX(100%); }
\n to { -webkit-transform: translateX(0); }
\n}<\/p>\n
\n from { -webkit-transform: translateX(-100%); }
\n to { -webkit-transform: translateX(0); }
\n}<\/p>\n
\n from { -webkit-transform: translateX(0); }
\n to { -webkit-transform: translateX(-100%); }
\n}<\/p>\n
\n from { -webkit-transform: translateX(0); }
\n to { -webkit-transform: translateX(100%); }
\n}<\/p>\n
\n from { -webkit-transform: translateY(-100%); }
\n to { -webkit-transform: translateY(0); }
\n}<\/p>\n
\n from { -webkit-transform: translateY(100%); }
\n to { -webkit-transform: translateY(0); }
\n}<\/p>\n
\n from { -webkit-transform: translateY(0); }
\n to { -webkit-transform: translateY(100%); }
\n}<\/p>\n
\n from { -webkit-transform: translateY(0); }
\n to { -webkit-transform: translateY(-100%); }
\n}
\n@-webkit-keyframes fadein {
\n from { opacity: 0; }
\n to { opacity: 1; }
\n}<\/p>\n
\n from { opacity: 1; }
\n to { opacity: 0; }
\n}<\/p>\n
\n\tz-index: 0;
\n\t-webkit-animation-name: fadeout;
\n}<\/p>\n
\n\topacity: 1;
\n\tz-index: 10;
\n\t-webkit-animation-name: fadein;
\n}<\/p>\n
\n * We need specify the perspective to create a projection matrix. This will add
\n * some depth as the element flips. The depth number represents the distance of
\n * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
\n * value.
\n *\/
\n.viewport-flip {
\n\t-webkit-perspective: 1000;
\n\tposition: absolute;
\n}<\/p>\n
\n.ui-mobile-viewport-transitioning .ui-page {
\n\twidth: 100%;
\n\theight: 100%;
\n\toverflow: visible;
\n}<\/p>\n
\n\t-webkit-animation-duration: .65s;
\n\t-webkit-backface-visibility:hidden;
\n\t-webkit-transform:translateX(0); \/* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. *\/
\n}<\/p>\n
\n\t-webkit-transform: rotateY(-180deg) scale(.8);
\n\t-webkit-animation-name: flipouttoleft;
\n}<\/p>\n
\n\t-webkit-transform: rotateY(0) scale(1);
\n\t-webkit-animation-name: flipinfromleft;
\n}<\/p>\n
\n\t-webkit-transform: rotateY(180deg) scale(.8);
\n\t-webkit-animation-name: flipouttoright;
\n}<\/p>\n
\n\t-webkit-transform: rotateY(0) scale(1);
\n\t-webkit-animation-name: flipinfromright;
\n}<\/p>\n
\n from { -webkit-transform: rotateY(-180deg) scale(.8); }
\n to { -webkit-transform: rotateY(0) scale(1); }
\n}<\/p>\n
\n from { -webkit-transform: rotateY(180deg) scale(.8); }
\n to { -webkit-transform: rotateY(0) scale(1); }
\n}<\/p>\n
\n from { -webkit-transform: rotateY(0) scale(1); }
\n to { -webkit-transform: rotateY(-180deg) scale(.8); }
\n}<\/p>\n
\n from { -webkit-transform: rotateY(0) scale(1); }
\n to { -webkit-transform: rotateY(180deg) scale(.8); }
\n}<\/p>\n
\n from { opacity: 1; }
\n to { opacity: 1; }
\n}<\/p>\n
\n\t-webkit-transform-origin: 50% 50%;
\n}<\/p>\n
\n\t-webkit-transform: scale(1);
\n opacity: 1;
\n\t-webkit-animation-name: popin;
\n\tz-index: 10;
\n}<\/p>\n
\n\tz-index: 0;
\n\t-webkit-animation-name: dontmove;
\n}<\/p>\n
\n\t-webkit-transform: scale(.2);
\n\topacity: 0;
\n\t-webkit-animation-name: popout;
\n\tz-index: 10;
\n}<\/p>\n
\n from {
\n -webkit-transform: scale(.2);
\n opacity: 0;
\n }
\n to {
\n -webkit-transform: scale(1);
\n opacity: 1;
\n }
\n}<\/p>\n
\n from {
\n -webkit-transform: scale(1);
\n opacity: 1;
\n }
\n to {
\n -webkit-transform: scale(.2);
\n opacity: 0;
\n }
\n}[\/code]<\/p>\n