Merge remote-tracking branch 'origin/master'

Makefile

@@ -47,6 +47,7 @@ JSFILES = 	  js/jquery.ui.widget.js \
 			  js/jquery.mobile.page.js \
 			  js/jquery.mobile.core.js \
 			  js/jquery.mobile.navigation.js \
+			  js/jquery.mobile.transition.js \
 			  js/jquery.mobile.fixHeaderFooter.js \
 			  js/jquery.mobile.forms.checkboxradio.js \
 			  js/jquery.mobile.forms.textinput.js \

build.xml

@@ -29,6 +29,7 @@
 	jquery.mobile.page.js,
 	jquery.mobile.core.js,
 	jquery.mobile.navigation.js,
+	jquery.mobile.transition.js,
 	jquery.mobile.fixHeaderFooter.js,
 	jquery.mobile.forms.checkboxradio.js,
 	jquery.mobile.forms.textinput.js,

js/index.php

@@ -11,6 +11,7 @@ $elements = array(
 	'jquery.mobile.page.js',
 	'jquery.mobile.core.js',
 	'jquery.mobile.navigation.js',
+	'jquery.mobile.transition.js',
 	'jquery.mobile.fixHeaderFooter.js',
 	'jquery.mobile.forms.checkboxradio.js',
 	'jquery.mobile.forms.textinput.js',

js/jquery.mobile.navigation.js

@@ -313,6 +313,24 @@
 	//history stack
 	$.mobile.urlHistory = urlHistory;
 
+	//default non-animation transition handler
+	$.mobile.noneTransitionHandler = function(name, reverse, $to, $from){
+		if ($from){
+			$from.removeClass( $.mobile.activePageClass );
+		}
+		$to.addClass( $.mobile.activePageClass );
+
+		return $.Deferred().resolve(name, reverse, $to, $from).promise();
+	};
+
+	//default handler for unknown transitions
+	$.mobile.defaultTransitionHandler = $.mobile.noneTransitionHandler;
+
+	//transition handler dictionary for 3rd party transitions
+	$.mobile.transitionHandlers = {
+		none: $.mobile.defaultTransitionHandler
+	};
+
 	//enable cross-domain page support
 	$.mobile.allowCrossDomainPages = false;
 
@@ -412,9 +430,7 @@
 		    $.mobile.silentScroll();
 
 			//get current scroll distance
-			var currScroll = $window.scrollTop(),
-					perspectiveTransitions = [ "flip" ],
-					pageContainerClasses = [];
+			var currScroll = $window.scrollTop();
 
 			//support deep-links to generated sub-pages
 			if( url.indexOf( "&" + $.mobile.subPageUrlKey ) > -1 ){
@@ -481,52 +497,19 @@
 				releasePageTransitionLock();
 			}
 
-			function addContainerClass(className){
-				$.mobile.pageContainer.addClass(className);
-				pageContainerClasses.push(className);
-			}
-
-			function removeContainerClasses(){
-				$.mobile
-					.pageContainer
-					.removeClass(pageContainerClasses.join(" "));
-
-				pageContainerClasses = [];
-			}
-
 			//clear page loader
 			$.mobile.pageLoading( true );
 
-			if(transition && (transition !== 'none')){
-				if( $.inArray(transition, perspectiveTransitions) >= 0 ){
-					addContainerClass('ui-mobile-viewport-perspective');
-				}
+			//find the transition handler for the specified transition. If there
+			//isn't one in our transitionHandlers dictionary, use the default one.
+			//call the handler immediately to kick-off the transition.
+			var th = $.mobile.transitionHandlers[transition || "none"] || $.mobile.defaultTransitionHandler,
+				deferred = th(transition, reverse, to, from);
 
-				addContainerClass('ui-mobile-viewport-transitioning');
-
-				if( from ){
-					from.addClass( transition + " out " + ( reverse ? "reverse" : "" ) );
-				}
-				to.addClass( $.mobile.activePageClass + " " + transition +
-					" in " + ( reverse ? "reverse" : "" ) );
-
-				// callback - remove classes, etc
-				to.animationComplete(function() {
-					to.add(from).removeClass("out in reverse " + transition );
-					if( from ){
-						from.removeClass( $.mobile.activePageClass );
-					}
-					pageChangeComplete();
-					removeContainerClasses();
-				});
-			}
-			else{
-			    if( from ){
-					from.removeClass( $.mobile.activePageClass );
-				}
-				to.addClass( $.mobile.activePageClass );
+			//register a done callback on the transition so we can do some book-keeping cleanup. 
+			deferred.done(function(){
 				pageChangeComplete();
-			}
+			});
 		}
 
 		//shared page enhancements

js/jquery.mobile.transition.js

@@ -0,0 +1,46 @@
+/*!
+ * jQuery Mobile v@VERSION
+ * http://jquerymobile.com/
+ *
+ * Copyright 2010, jQuery Project
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+
+(function( $, window, undefined ) {
+
+function css3TransitionHandler(name, reverse, $to, $from)
+{
+	var deferred = new $.Deferred(),
+		reverseClass = reverse ? " reverse" : "",
+		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+		doneFunc = function(){
+			$to.add($from).removeClass("out in reverse " + name);
+			if ($from){
+				$from.removeClass($.mobile.activePageClass);
+			}
+			$to.parent().removeClass(viewportClass);
+	
+			deferred.resolve(name, reverse, $to, $from);
+		};
+	
+	$to.animationComplete(doneFunc);
+	
+	$to.parent().addClass(viewportClass);
+	if ($from){
+		$from.addClass(name + " out" + reverseClass);
+	}
+	$to.addClass($.mobile.activePageClass + " " + name + " in" + reverseClass);
+
+	return deferred.promise();
+}
+
+// Make our transition handler public.
+$.mobile.css3TransitionHandler = css3TransitionHandler;
+
+// If the default transition handler is the 'none' handler, replace it with our handler.
+if ($.mobile.defaultTransitionHandler === $.mobile.noneTransitionHandler){
+	$.mobile.defaultTransitionHandler = css3TransitionHandler;
+}
+
+})( jQuery, this );

tests/unit/navigation/navigation_transitions.js

@@ -2,7 +2,7 @@
  * mobile navigation unit tests
  */
 (function($){
-	var perspective = "ui-mobile-viewport-perspective",
+	var perspective = "viewport-flip",
 			transitioning = "ui-mobile-viewport-transitioning",
 			animationCompleteFn = $.fn.animationComplete,
 

themes/default/jquery.mobile.transitions.css

@@ -145,13 +145,13 @@ Built by David Kaneda and maintained by Jonathan Stark.
 	-webkit-animation-name: fadeout;
 }
 
-/* The properties in this body rule are only necessary for the 'flip' transition.
+/* The properties in this rule are only necessary for the 'flip' transition.
  * We need specify the perspective to create a projection matrix. This will add
  * some depth as the element flips. The depth number represents the distance of
  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
  * value.
  */
-.ui-mobile-viewport-perspective {
+.viewport-flip {
 	-webkit-perspective: 1000;
 	position: absolute;
 }