Much of the scripting in nav.js's transitionPages function was tied to the animation sequence for our css3transitionhandler. For example, the order was, scroll to top, run transitions, then scroll to the remembered location of the new page (there's more involved, but that's the gist of it). If we want to expand beyond this sequence, much of that scripting needs to move to the css3transitionhandler itself, and also to our "none" transition handler, which comes with nav model.

This commit moves all that logic into the transition handlers, and should provide a better starting point for adding different transition sequences, such as fade-out, scroll, fade-in.

In the process of making this change, the reFocus function was made public as $.mobile.focusPage.

js/jquery.mobile.navigation.js

@@ -376,7 +376,7 @@ define( [
 
 
 	//direct focus to the page title, or otherwise first focusable element
-	function reFocus( page ) {
+	$.mobile.focusPage = function ( page ) {
 		var pageTitle = page.find( ".ui-title:eq(0)" );
 
 		if( pageTitle.length ) {
@@ -494,44 +494,13 @@ define( [
 	//function for transitioning between two existing pages
 	function transitionPages( toPage, fromPage, transition, reverse ) {
 
-		//get current scroll distance
-		var active	= $.mobile.urlHistory.getActive(),
-			touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
-			toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
-			screenHeight = getScreenHeight();
-
-		// Scroll to top, hide addr bar
-		window.scrollTo( 0, $.mobile.defaultHomeScroll );
-
 		if( fromPage ) {
 			//trigger before show/hide events
 			fromPage.data( "page" )._trigger( "beforehide", null, { nextPage: toPage } );
 		}
 
-		if( !touchOverflow){
-			toPage.height( screenHeight + toScroll );
-		}
-
 		toPage.data( "page" )._trigger( "beforeshow", null, { prevPage: fromPage || $( "" ) } );
 
-		//clear page loader
-		$.mobile.hidePageLoadingMsg();
-
-		if( touchOverflow && toScroll ){
-
-			toPage.addClass( "ui-mobile-pre-transition" );
-			// Send focus to page as it is now display: block
-			reFocus( toPage );
-
-			//set page's scrollTop to remembered distance
-			if( toPage.is( ".ui-native-fixed" ) ){
-				toPage.find( ".ui-content" ).scrollTop( toScroll );
-			}
-			else{
-				toPage.scrollTop( toScroll );
-			}
-		}
-
 		//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.
@@ -539,24 +508,9 @@ define( [
 			promise = th( transition, reverse, toPage, fromPage );
 
 		promise.done(function() {
-			//reset toPage height back
-			if( !touchOverflow ){
-				toPage.height( "" );
-				// Send focus to the newly shown page
-				reFocus( toPage );
-			}
-
-			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			if( !touchOverflow ){
-				$.mobile.silentScroll( toScroll );
-			}
 
 			//trigger show/hide events
 			if( fromPage ) {
-				if( !touchOverflow ){
-					fromPage.height( "" );
-				}
-
 				fromPage.data( "page" )._trigger( "hide", null, { nextPage: toPage } );
 			}
 
@@ -628,13 +582,48 @@ define( [
 	$.mobile.dialogHashKey = dialogHashKey;
 
 	//default non-animation transition handler
-	$.mobile.noneTransitionHandler = function( name, reverse, $toPage, $fromPage ) {
-		if ( $fromPage ) {
-			$fromPage.removeClass( $.mobile.activePageClass );
+	$.mobile.noneTransitionHandler = function( name, reverse, $to, $from ) {
+		var active	= $.mobile.urlHistory.getActive(),
+			touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
+			toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
+			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+			screenHeight = $.mobile.getScreenHeight();
+		
+		if( !touchOverflow){
+			$to.height( screenHeight + toScroll );
 		}
-		$toPage.addClass( $.mobile.activePageClass );
 
-		return $.Deferred().resolve( name, reverse, $toPage, $fromPage ).promise();
+		if( touchOverflow && toScroll ){
+			
+			$to.addClass( "ui-mobile-pre-transition" );
+		
+			// Send focus to page as it is now display: block
+			$.mobile.focusPage( $to );
+
+			//set page's scrollTop to remembered distance
+			if( $to.is( ".ui-native-fixed" ) ){
+				$to.find( ".ui-content" ).scrollTop( toScroll );
+			}
+			else{
+				$to.scrollTop( toScroll );
+			}
+		}
+
+		//clear page loader
+		$.mobile.hidePageLoadingMsg();
+
+		if ( $from ) {
+			$from.removeClass( $.mobile.activePageClass );
+		}
+		
+		$to.addClass( $.mobile.activePageClass );
+
+		// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+		if( !touchOverflow ){
+			$.mobile.silentScroll( toScroll );
+		}
+
+		return $.Deferred().resolve( name, reverse, $to, $from ).promise();
 	};
 
 	//default handler for unknown transitions
@@ -1172,6 +1161,12 @@ define( [
 				//remove initial build class (only present on first pageshow)
 				$html.removeClass( "ui-mobile-rendering" );
 
+				// Send focus to the newly shown page. Moved from promise .done binding in transitionPages
+				// itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility)
+				// despite visibility: hidden addresses issue #2965
+				// https://github.com/jquery/jquery-mobile/issues/2965
+				$.mobile.focusPage( toPage );
+
 				releasePageTransitionLock();
 
 				// Let listeners know we're all done changing the current page.

js/jquery.mobile.transition.js

@@ -17,7 +17,11 @@ function css3TransitionHandler( name, reverse, $to, $from ) {
 
 	var deferred = new $.Deferred(),
 		reverseClass = reverse ? " reverse" : "",
+		active	= $.mobile.urlHistory.getActive(),
+		touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
+		toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
 		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+		screenHeight = $.mobile.getScreenHeight(),
 		doneFunc = function() {
 
 			$to.add( $from ).removeClass( "out in reverse " + name );
@@ -27,6 +31,23 @@ function css3TransitionHandler( name, reverse, $to, $from ) {
 			}
 
 			$to.parent().removeClass( viewportClass );
+			
+			//reset $to height back
+			if( !touchOverflow ){
+				$to.height( "" );
+			}
+
+			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+			if( !touchOverflow ){
+				$.mobile.silentScroll( toScroll );
+			}
+
+			//trigger show/hide events
+			if( $from ) {
+				if( !touchOverflow ){
+					$from.height( "" );
+				}
+			}
 
 			deferred.resolve( name, reverse, $to, $from );
 		};
@@ -34,10 +55,37 @@ function css3TransitionHandler( name, reverse, $to, $from ) {
 	$to.animationComplete( doneFunc );
 
 	$to.parent().addClass( viewportClass );
+	
+	// Scroll to top, hide addr bar
+	window.scrollTo( 0, $.mobile.defaultHomeScroll );
+	
+	if( !touchOverflow){
+		$to.height( screenHeight + toScroll );
+	}
 
+	if( touchOverflow && toScroll ){
+		
+		$to.addClass( "ui-mobile-pre-transition" );
+		
+		// Send focus to page as it is now display: block
+		$.mobile.focusPage( $to );
+
+		//set page's scrollTop to remembered distance
+		if( $to.is( ".ui-native-fixed" ) ){
+			$to.find( ".ui-content" ).scrollTop( toScroll );
+		}
+		else{
+			$to.scrollTop( toScroll );
+		}
+	}
+
+	//clear page loader
+	$.mobile.hidePageLoadingMsg();
+	
 	if ( $from ) {
 		$from.addClass( name + " out" + reverseClass );
 	}
+	
 	$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
 
 	return deferred.promise();
@@ -48,7 +96,7 @@ $.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;
+	//$.mobile.defaultTransitionHandler = css3TransitionHandler;
 }
 
 })( jQuery, this );