- Re-implemented the css3TransitionHandler() code in terms of the keyframe animation implementation. Some timer tweaks were necessary to catch the case where there is no transition (change in value) for the "to" or "from" page.

- Re-worked the CSS target selectors for slide, slideup, slidedown, pop, and fade to make sure things animated properly in both the forward and reverse directions.

- Added .ui-page.in rule to make sure the page we are transitioning to is visible at the exact moment the transition is setup. This used to be handled by setting the ui-active-page class on the "to" page before firing the transition, but that was causing some flashing before/after the transition happened.

Author: jblas

js/jquery.mobile.navigation.js

@@ -538,9 +538,7 @@
 
 	//transition handler dictionary for 3rd party transitions
 	$.mobile.transitionHandlers = {
-		none: $.mobile.defaultTransitionHandler,
-		slide: $.mobile.noneTransitionHandler,
-		flip: $.mobile.noneTransitionHandler
+		none: $.mobile.defaultTransitionHandler
 	};
 
 	//enable cross-domain page support

js/jquery.mobile.transition.js

@@ -9,87 +9,66 @@
 
 (function( $, window, undefined ) {
 
-/**
- * Runs a transition on the element specified by the animation classes passed as first argument
- * (cp. jquery.mobile.transitions.css) and calls a callback once they're done.
- *
- * If the callback event has not been triggered after <timeout> milliseconds, the callback is
- * called "manually". The optional third argument allows you to define a custom timeout or
- * disable it completely (by passing 0 or false).
- */
-$.fn.jqmTransition = function( classes ) {
-	console.log("jqmTransition( '"+classes+"')" );
-	var $this = $( this ),
-	    fallbackTimeout = null,
-	    handler = function() {
-			if ( fallbackTimeout ) {
-				clearTimeout( fallbackTimeout );
+function css3TransitionHandler( name, reverse, $to, $from ) {
+
+	var deferred = new $.Deferred(),
+		reverseClass = reverse ? " reverse" : "",
+		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+		$both = $to.add( $from ),
+		doneTimer = 0;
+		var doneFunc = function() {
+			if ( doneTimer ) {
+				clearTimeout( doneTimer );
+				doneTimer = 0;
+			}
+
+			if ( $from ) {
+				$from.removeClass( $.mobile.activePageClass );
 			}
-			$this.removeClass( "animate " + classes );
+
+			$to.addClass( $.mobile.activePageClass );
+
+			$both.removeClass( "out in reverse animate " + name );
+
+			$to.parent().removeClass( viewportClass );
+
+			deferred.resolve( name, reverse, $to, $from );
 		};
 
-	if ( $.support.cssTransitions ) {
-		// add animate class to start animation
-		$this.addClass( classes );
-		setTimeout(function() {
-			$this.addClass( "animate" );
-		}, 25 );
-	}
-	return $this;
-};
-
-function makeCss3TransitionHandler(isTwoMovingParts) {
-	return function( name, reverse, $to, $from ) {
-		var deferred = new $.Deferred(),
-			reverseClass = reverse ? " reverse" : "",
-			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
-			doneFunc = function() {
-				console.log( name + reverseClass + ": doneFunc()" );
-				$to.add( $from ).removeClass( "out in reverse " + name );
-				if ( $from ) {
-					$from.removeClass( $.mobile.activePageClass );
-				}
-				$to.parent().removeClass( viewportClass );
-
-				deferred.resolve( name, reverse, $to, $from );
-			};
-
-		if ( !reverse ) {
-			$to.transitionComplete( doneFunc );
-		} else {
-			$from.transitionComplete( doneFunc );
-		}
+	// Set up a callback on the to element so we know when it
+	// is done transitioning. Some transitions don't actually
+	// animate the to element, so we also fire a timer to manually
+	// trigger our done callback .
 
-		$to.parent().addClass( viewportClass );
-		if ( $from ) {
-			$from.jqmTransition( name + " out" + reverseClass);
-		}
-		$to.addClass( $.mobile.activePageClass );
+	$to.transitionComplete( doneFunc );
 
-		if ( isTwoMovingParts || !reverse ) {
-			$to.jqmTransition( name + " in" + reverseClass);
+	doneTimer = setTimeout(function() {
+		if( $.support.cssTransitions ) {
+			$to.unbind( "transitionend webkitTransitionEnd OTransitionEnd", doneFunc );
 		}
+		doneFunc();
+	}, 1000);
+
+	$to.parent().addClass( viewportClass );
 
-		return deferred.promise();
+	if ( $from ) {
+		$from.addClass( name + " out" + reverseClass );
 	}
+	$to.addClass( name + " in" + reverseClass );
+
+	setTimeout(function(){
+		$both.addClass("animate");
+	}, 25);
+
+	return deferred.promise();
 }
 
 // Make our transition handler public.
-$.mobile.css3TransitionHandler = makeCss3TransitionHandler();
+$.mobile.css3TransitionHandler = css3TransitionHandler;
 
 // If the default transition handler is the 'none' handler, replace it with our handler.
 if ( $.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler ) {
-	$.mobile.defaultTransitionHandler = $.mobile.css3TransitionHandler;
-}
-
-// If the slide transition handler is the 'none' handler, replace it with our handler.
-if ( $.mobile.transitionHandlers.slide === $.mobile.noneTransitionHandler ) {
-	$.mobile.transitionHandlers.slide = makeCss3TransitionHandler(true);
-}
-
-// If the flip transition handler is the 'none' handler, replace it with our handler.
-if ( $.mobile.transitionHandlers.flip === $.mobile.noneTransitionHandler ) {
-	$.mobile.transitionHandlers.flip = makeCss3TransitionHandler(true);
+	$.mobile.defaultTransitionHandler = css3TransitionHandler;
 }
 
 })( jQuery, this );

themes/default/jquery.mobile.transitions.css

@@ -22,14 +22,13 @@
 	        transition: 350ms ease-in-out;
 }
 
-.in,
-.out.animate {
-	z-index: 10;
-}
-
-.out,
-.in.reverse.animate {
-	z-index: 0;
+/* To avoid flashing, we need to make sure we toggle
+ * the display/visibility of the page that is being
+ * transitioned to at the same time we set its z-index.
+ */
+.ui-page.in {
+	display: block;
+	visibility: visible;
 }
 
 .slide.animate,
@@ -41,6 +40,16 @@
 	        transition-property:         transform;
 }
 
+.slide.in,
+.slide.in.reverse {
+	z-index: 10;
+}
+
+.slide.out,
+.slide.out.reverse {
+	z-index: 0;
+}
+
 .slide.in,
 .slide.out.reverse.animate {
 	-webkit-transform: translateX(100%);
@@ -51,8 +60,8 @@
 
 .slide.in.animate,
 .slide.in.reverse.animate,
-.slide.out.reverse,
-.slide.out {
+.slide.out,
+.slide.out.reverse {
 	-webkit-transform: translateX(0);
 	   -moz-transform: translateX(0);
 	     -o-transform: translateX(0);
@@ -64,10 +73,31 @@
 	-webkit-transform: translateX(-100%);
 	   -moz-transform: translateX(-100%);
 	     -o-transform: translateX(-100%);
-	        transform: translateX(-100%);
+		    transform: translateX(-100%);
+}
+
+.slidedown.in,
+.slidedown.out.reverse,
+.slideup.in,
+.slideup.out.reverse {
+	z-index: 10;
 }
 
 .slidedown.in.reverse,
+.slidedown.out,
+.slideup.in.reverse,
+.slideup.out {
+	z-index: 0;
+}
+
+.slidedown.in,
+.slidedown.out.reverse.animate {
+	-webkit-transform: translateY(-100%);
+	   -moz-transform: translateY(-100%);
+	     -o-transform: translateY(-100%);
+		    transform: translateY(-100%);
+}
+
 .slideup.in,
 .slideup.out.reverse.animate {
 	-webkit-transform: translateY(100%);
@@ -77,26 +107,19 @@
 }
 
 .slidedown.in.animate,
-.slidedown.in.reverse.animate,
+.slidedown.in.reverse,
 .slidedown.out,
+.slidedown.out.reverse,
 .slideup.in.animate,
-.slideup.in.reverse.animate,
-.slideup.out {
+.slideup.in.reverse,
+.slideup.out,
+.slideup.out.reverse {
 	-webkit-transform: translateY(0);
 	   -moz-transform: translateY(0);
 	     -o-transform: translateY(0);
 		    transform: translateY(0);
 }
 
-.slidedown.in,
-.slidedown.out.reverse.animate,
-.slideup.in.reverse {
-	-webkit-transform: translateY(-100%);
-	   -moz-transform: translateY(-100%);
-	     -o-transform: translateY(-100%);
-		    transform: translateY(-100%);
-}
-
 .fade.animate {
 	-webkit-transition-property: opacity;
 	   -moz-transition-property: opacity;
@@ -162,6 +185,17 @@
 	-webkit-transform: rotateY(-180deg) scale(.8);
 }
 
+.pop.in,
+.pop.out.reverse {
+	z-index: 10;
+}
+
+.pop.in.reverse,
+.pop.out {
+	z-index: 0;
+}
+
+
 .pop.animate {
 	-webkit-transition-property: -webkit-transform, opacity;
 	   -moz-transition-property:    -moz-transform, opacity;
@@ -183,17 +217,16 @@
 	     -o-transform: scale(.2);
 	        transform: scale(.2);
 	opacity: 0;
-	z-index: 10;
 }
 
+.pop.in.reverse,
 .pop.in.animate,
 .pop.out.reverse{
 	-webkit-transform: scale(1.0);
 	   -moz-transform: scale(1.0);
 	     -o-transform: scale(1.0);
 	        transform: scale(1.0);
     opacity: 1;
-	z-index: 10;
 }
 
 @-o-viewport {