From 99e9eb286956f484b065a2d499c05316886d5f99 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 26 Mar 2012 16:00:13 +0530
Subject: [PATCH 01/15] wrapped and refactored portions of the default
 transitionHandler function to allow for sequential or simultaneous
 transitions. The default sequential transition handler for 1.1 should not
 change at all. Both types are defined as different transition handlers
 ($.mobile.transitionHandlers.simultaneous and
 $.mobile.transitionHandlers.sequential), though their logic is shared
 internally by both to keep overhead low. As was already the case, custom
 transitions can define a non-default handler by defining a transition handler
 named the same as the css transition, and referencing one of the existing
 handlers (or an entirely new one).

---
 js/jquery.mobile.transition.js | 139 +++++++++++++++++++++------------
 1 file changed, 87 insertions(+), 52 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 094ffece623..71231ed2373 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -9,82 +9,117 @@ define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, window, undefined ) {
 
-function outInTransitionHandler( name, reverse, $to, $from ) {
+var createHandler = function( sequential ){
 	
-	// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
-	if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
-		name = $.mobile.transitionFallbacks[ name ];
+	// Default to sequential
+	if( sequential === undefined ){
+		sequential = true;
 	}
 	
-	var deferred = new $.Deferred(),
-		reverseClass = reverse ? " reverse" : "",
-		active	= $.mobile.urlHistory.getActive(),
-		toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
-		screenHeight = $.mobile.getScreenHeight(),
-		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
-		maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
-		none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
-		doneOut = function() {
-
-			if ( $from ) {
+	return function( name, reverse, $to, $from ) {
+	
+		// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
+		if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
+			name = $.mobile.transitionFallbacks[ name ];
+		}
+		
+		var deferred = new $.Deferred(),
+			reverseClass = reverse ? " reverse" : "",
+			active	= $.mobile.urlHistory.getActive(),
+			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
+			screenHeight = $.mobile.getScreenHeight(),
+			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
+			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+			cleanFrom = function(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
 					.height( "" );
-			}
+			},
+			doneOut = function() {
+
+				if ( $from && sequential ) {
+					cleanFrom();
+				}
 			
-			$to.addClass( $.mobile.activePageClass );
+				$to.addClass( $.mobile.activePageClass );
 			
-			if( !none ){
-				$to.animationComplete( doneIn );
-			}
+				if( !none ){
+					$to.animationComplete( doneIn );
+				}
 			
-			// Send focus to page as it is now display: block
-			$.mobile.focusPage( $to );
+				// Send focus to page as it is now display: block
+				$.mobile.focusPage( $to );
 
-			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			$to.height( screenHeight + toScroll );
+				// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+				$to.height( screenHeight + toScroll );
 				
-			$.mobile.silentScroll( toScroll );
+				$.mobile.silentScroll( toScroll );
 			
-			$to.addClass( name + " in" + reverseClass );
+				$to.addClass( name + " in" + reverseClass );
 			
-			if( none ){
-				doneIn();
-			}
+				if( none ){
+					doneIn();
+				}
 			
-		},
+			},
 		
-		doneIn = function() {
-			$to
-				.removeClass( "out in reverse " + name )
-				.height( "" )
-				.parent().removeClass( viewportClass );
+			doneIn = function() {
+			
+				if ( !sequential ) {
+					
+					$.mobile.silentScroll( toScroll );
+					
+					if( $from ){
+						cleanFrom();
+					}
+				}
+			
+				$to
+					.removeClass( "out in reverse " + name )
+					.height( "" )
+					.parent().removeClass( viewportClass );
 
-			deferred.resolve( name, reverse, $to, $from, true );
-		};
-		
-	$to
-		.parent().addClass( viewportClass );
+				deferred.resolve( name, reverse, $to, $from, true );
+			};
+
+		$to
+			.parent().addClass( viewportClass );
 	
-	if ( $from && !none ) {
-		$from
-			.animationComplete( doneOut )
-			.height( screenHeight + $(window ).scrollTop() )
-			.addClass( name + " out" + reverseClass );
-	}
-	else {	
-		doneOut();
-	}
+		if ( $from && !none ) {
+		
+			// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+			if( !sequential ){
+				doneOut();
+			}
+			else {
+				$from.animationComplete( doneOut );	
+			}
+		
+			$from
+				.height( screenHeight + $(window ).scrollTop() )
+				.addClass( name + " out" + reverseClass );
+		}
+		else {	
+			doneOut();
+		}
 
-	return deferred.promise();
+		return deferred.promise();
+	};
 }
 
+// generate the handlers from the above
+var sequentialHandler = createHandler(),
+	simultaneousHandler = createHandler( false );
+
 // Make our transition handler the public default.
-$.mobile.defaultTransitionHandler = outInTransitionHandler;
+$.mobile.defaultTransitionHandler = sequentialHandler;
 
 //transition handler dictionary for 3rd party transitions
 $.mobile.transitionHandlers = {
-	"default": $.mobile.defaultTransitionHandler
+	"default": $.mobile.defaultTransitionHandler,
+	"sequential": sequentialHandler,
+	"simultaneous": simultaneousHandler
 };
 
 $.mobile.transitionFallbacks = {};

From 3104052708077e263d692a18d13d51c0d313ea71 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 26 Mar 2012 16:00:30 +0530
Subject: [PATCH 02/15] updated slide transition to use the simultaneous
 handler.

---
 .../jquery.mobile.transitions.slide.css       | 42 +++++++++++++------
 js/jquery.mobile.transition.slide.js          |  8 +++-
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css
index 27c593752b7..0208291322b 100644
--- a/css/structure/jquery.mobile.transitions.slide.css
+++ b/css/structure/jquery.mobile.transitions.slide.css
@@ -1,20 +1,22 @@
 /* slide transition */
+.slide.out, .slide.in {
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-timing-function: ease-out;
+	-moz-animation-duration: 350ms;
+}
 .slide.out {
 	-webkit-transform: translateX(-100%);
 	-webkit-animation-name: slideouttoleft;
 	-moz-transform: translateX(-100%);
 	-moz-animation-name: slideouttoleft;
-	-webkit-animation-duration: 225ms;
-	-moz-animation-duration: 225ms;
 }
 
 .slide.in {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromright;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
+	-moz-animation-name: slideinfromright;
 }
 
 .slide.out.reverse {
@@ -22,17 +24,31 @@
 	-webkit-animation-name: slideouttoright;
 	-moz-transform: translateX(100%);
 	-moz-animation-name: slideouttoright;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
 }
 
 .slide.in.reverse {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
+	-moz-animation-name: slideinfromleft;
+}
+
+@-webkit-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
 }
 
 @-webkit-keyframes slideouttoleft {
@@ -51,4 +67,4 @@
 @-moz-keyframes slideouttoright {
     from { -moz-transform: translateX(0); }
     to { -moz-transform: translateX(100%); }
-}
\ No newline at end of file
+}
diff --git a/js/jquery.mobile.transition.slide.js b/js/jquery.mobile.transition.slide.js
index 266bdc300a3..5f5266c201b 100644
--- a/js/jquery.mobile.transition.slide.js
+++ b/js/jquery.mobile.transition.slide.js
@@ -3,8 +3,8 @@
 */
 
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-//>>description: Fallback transition for slide in non-3D supporting browsers
-//>>label: Slide fallback transition
+//>>description: Handler and fallback transition for slide in non-3D supporting browsers
+//>>label: Slide handler and fallback transition
 //>>group: Transitions
 //>>css: ../css/structure/jquery.mobile.transition.slide.css
 
@@ -12,6 +12,10 @@ define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, window, undefined ) {
 
+// Use the simultaneous transition handler for slide transitions
+$.mobile.transitionHandlers.slide = $.mobile.transitionHandlers.simultaneous;
+
+// Set the slide transition's fallback to "fade"
 $.mobile.transitionFallbacks.slide = "fade";
 
 })( jQuery, this );

From 3e787b4540e679b565ee1f8254e9b249a56c274f Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:03:40 +0530
Subject: [PATCH 03/15] changed default of minScrollBack to 250 - the value
 still claimed in the docs. This reverts @toddparker's change in commit
 a6dc847474cd43b10d85744c66bd1d9ccce1632a, as a higher number is needed when
 reintroducing simultaneous transitions

---
 js/jquery.mobile.core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js
index a0cf1d95596..c659119fda4 100644
--- a/js/jquery.mobile.core.js
+++ b/js/jquery.mobile.core.js
@@ -50,7 +50,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
 		maxTransitionWidth: false,
 
 		// Minimum scroll distance that will be remembered when returning to a page
-		minScrollBack: 10,
+		minScrollBack: 250,
 
 		// DEPRECATED: the following property is no longer in use, but defined until 2.0 to prevent conflicts
 		touchOverflowEnabled: false,

From b142fc1f469a3f0eb67b850204a512d0ecd0e65a Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:18:58 +0530
Subject: [PATCH 04/15] reused some code, removed a var

---
 js/jquery.mobile.transition.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 71231ed2373..8e7b3d087d8 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -28,9 +28,11 @@ var createHandler = function( sequential ){
 			active	= $.mobile.urlHistory.getActive(),
 			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
 			screenHeight = $.mobile.getScreenHeight(),
-			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
 			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
 			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+			toggleViewportClass = function(){
+				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
+			},
 			cleanFrom = function(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
@@ -77,14 +79,14 @@ var createHandler = function( sequential ){
 			
 				$to
 					.removeClass( "out in reverse " + name )
-					.height( "" )
-					.parent().removeClass( viewportClass );
+					.height( "" );
+				
+				toggleViewportClass();	
 
 				deferred.resolve( name, reverse, $to, $from, true );
 			};
 
-		$to
-			.parent().addClass( viewportClass );
+		toggleViewportClass();
 	
 		if ( $from && !none ) {
 		

From ee6d656c82d2ce9996078b81d9ad63e766cb19d0 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:42:10 +0530
Subject: [PATCH 05/15] moved the fallback transition check out of the handler
 and into nav.js, where it can properly route to the necessary transition
 handler before calling it.

---
 js/jquery.mobile.navigation.js | 7 ++++++-
 js/jquery.mobile.transition.js | 7 +------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
index de86394c030..7dc47715271 100644
--- a/js/jquery.mobile.navigation.js
+++ b/js/jquery.mobile.navigation.js
@@ -485,7 +485,12 @@ define( [
 
 		//clear page loader
 		$.mobile.hidePageLoadingMsg();
-
+		
+		// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
+		if( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ){
+			transition = $.mobile.transitionFallbacks[ transition ];
+		}
+		
 		//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.
diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 8e7b3d087d8..4e1b58618be 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -17,12 +17,7 @@ var createHandler = function( sequential ){
 	}
 	
 	return function( name, reverse, $to, $from ) {
-	
-		// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
-		if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
-			name = $.mobile.transitionFallbacks[ name ];
-		}
-		
+
 		var deferred = new $.Deferred(),
 			reverseClass = reverse ? " reverse" : "",
 			active	= $.mobile.urlHistory.getActive(),

From 72bd7789c8c87bf768fb0aae5dc93faf528866e8 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 13:02:53 +0530
Subject: [PATCH 06/15] added back the "slidefade" transition, which is usually
 preferable to "slide", except in cases where a page is short enough that  a
 simultaneous transition sequence won't  jump much (which is needed for a
 regular slide transition). As part of this addition, the keyframes for
 slidein and slideout are now in their own files, as they are dependencies for
 these slide transitions

---
 css/structure/jquery.mobile.structure.css     |  3 ++
 .../jquery.mobile.transitions.slide.css       | 40 +------------------
 .../jquery.mobile.transitions.slidefade.css   | 36 +++++++++++++++++
 ...y.mobile.transitions.slidein.keyframes.css | 18 +++++++++
 ....mobile.transitions.slideout.keyframes.css | 18 +++++++++
 docs/pages/page-transitions.html              |  5 +++
 js/jquery.mobile.transition.slidefade.js      | 21 ++++++++++
 7 files changed, 103 insertions(+), 38 deletions(-)
 create mode 100644 css/structure/jquery.mobile.transitions.slidefade.css
 create mode 100644 css/structure/jquery.mobile.transitions.slidein.keyframes.css
 create mode 100644 css/structure/jquery.mobile.transitions.slideout.keyframes.css
 create mode 100644 js/jquery.mobile.transition.slidefade.js

diff --git a/css/structure/jquery.mobile.structure.css b/css/structure/jquery.mobile.structure.css
index 881878ea331..26f87d32a70 100644
--- a/css/structure/jquery.mobile.structure.css
+++ b/css/structure/jquery.mobile.structure.css
@@ -2,7 +2,10 @@
 @import url( "jquery.mobile.transitions.css" );
 @import url( "jquery.mobile.transitions.fade.css" );
 @import url( "jquery.mobile.transitions.pop.css" );
+@import url( "jquery.mobile.transitions.slidein.keyframes.css" );
+@import url( "jquery.mobile.transitions.slideout.keyframes.css" );
 @import url( "jquery.mobile.transitions.slide.css" );
+@import url( "jquery.mobile.transitions.slidefade.css" );
 @import url( "jquery.mobile.transitions.slidedown.css" );
 @import url( "jquery.mobile.transitions.slideup.css" );
 @import url( "jquery.mobile.transitions.flip.css" );
diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css
index 0208291322b..af2816b229c 100644
--- a/css/structure/jquery.mobile.transitions.slide.css
+++ b/css/structure/jquery.mobile.transitions.slide.css
@@ -1,4 +1,4 @@
-/* slide transition */
+/* slide transition - depends on slidein.keyframes and slideout.keyframes */
 .slide.out, .slide.in {
 	-webkit-animation-timing-function: ease-out;
 	-webkit-animation-duration: 350ms;
@@ -31,40 +31,4 @@
 	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
 	-moz-animation-name: slideinfromleft;
-}
-
-@-webkit-keyframes slideinfromright {
-    from { -webkit-transform: translateX(100%); }
-    to { -webkit-transform: translateX(0); }
-}
-@-moz-keyframes slideinfromright {
-    from { -webkit-transform: translateX(100%); }
-    to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideinfromleft {
-    from { -webkit-transform: translateX(-100%); }
-    to { -webkit-transform: translateX(0); }
-}
-@-moz-keyframes slideinfromleft {
-    from { -webkit-transform: translateX(-100%); }
-    to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideouttoleft {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(-100%); }
-}
-@-moz-keyframes slideouttoleft {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(-100%); }
-}
-
-@-webkit-keyframes slideouttoright {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(100%); }
-}
-@-moz-keyframes slideouttoright {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(100%); }
-}
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slidefade.css b/css/structure/jquery.mobile.transitions.slidefade.css
new file mode 100644
index 00000000000..02037aa24a5
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slidefade.css
@@ -0,0 +1,36 @@
+/* slidefade transition - depends on fadein and slidein.keyframes */
+.slidefade.out {
+	-webkit-transform: translateX(-100%);
+	-webkit-animation-name: slideouttoleft;
+	-moz-transform: translateX(-100%);
+	-moz-animation-name: slideouttoleft;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-duration: 225ms;
+}
+
+.slidefade.in {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: slideouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: slideouttoright;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.in.reverse {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slidein.keyframes.css b/css/structure/jquery.mobile.transitions.slidein.keyframes.css
new file mode 100644
index 00000000000..a7cb4928317
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slidein.keyframes.css
@@ -0,0 +1,18 @@
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slideout.keyframes.css b/css/structure/jquery.mobile.transitions.slideout.keyframes.css
new file mode 100644
index 00000000000..9bea1706b19
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slideout.keyframes.css
@@ -0,0 +1,18 @@
+/* keyframes for slideout to sides */
+@-webkit-keyframes slideouttoleft {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(-100%); }
+}
+@-moz-keyframes slideouttoleft {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slideouttoright {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(100%); }
+}
+@-moz-keyframes slideouttoright {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(100%); }
+}
diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html
index 5be0c00c4ed..daa8989c9e3 100644
--- a/docs/pages/page-transitions.html
+++ b/docs/pages/page-transitions.html
@@ -63,6 +63,11 @@ <h2>Page transitions</h2>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
 				<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
 			</tr>
+			<tr>
+				<th><h3>slidefade</h3></th>
+				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
+				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
+			</tr>
 			<tr>
 				<th><h3>slide</h3></th>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
diff --git a/js/jquery.mobile.transition.slidefade.js b/js/jquery.mobile.transition.slidefade.js
new file mode 100644
index 00000000000..300b987c560
--- /dev/null
+++ b/js/jquery.mobile.transition.slidefade.js
@@ -0,0 +1,21 @@
+/*
+* fallback transition for slidefade in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Handler and fallback transition for slide in non-3D supporting browsers
+//>>label: Slide handler and fallback transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slide.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+// Set the slide transition's fallback to "fade"
+$.mobile.transitionFallbacks.slidefade = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file

From d9b83b2b822430f3510d33b69e341ace1b6d872a Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 26 Mar 2012 16:00:13 +0530
Subject: [PATCH 07/15] wrapped and refactored portions of the default
 transitionHandler function to allow for sequential or simultaneous
 transitions. The default sequential transition handler for 1.1 should not
 change at all. Both types are defined as different transition handlers
 ($.mobile.transitionHandlers.simultaneous and
 $.mobile.transitionHandlers.sequential), though their logic is shared
 internally by both to keep overhead low. As was already the case, custom
 transitions can define a non-default handler by defining a transition handler
 named the same as the css transition, and referencing one of the existing
 handlers (or an entirely new one).

---
 js/jquery.mobile.transition.js | 139 +++++++++++++++++++++------------
 1 file changed, 87 insertions(+), 52 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 094ffece623..71231ed2373 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -9,82 +9,117 @@ define( [ "jquery", "./jquery.mobile.core" ], function( $ ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, window, undefined ) {
 
-function outInTransitionHandler( name, reverse, $to, $from ) {
+var createHandler = function( sequential ){
 	
-	// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
-	if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
-		name = $.mobile.transitionFallbacks[ name ];
+	// Default to sequential
+	if( sequential === undefined ){
+		sequential = true;
 	}
 	
-	var deferred = new $.Deferred(),
-		reverseClass = reverse ? " reverse" : "",
-		active	= $.mobile.urlHistory.getActive(),
-		toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
-		screenHeight = $.mobile.getScreenHeight(),
-		viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
-		maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
-		none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
-		doneOut = function() {
-
-			if ( $from ) {
+	return function( name, reverse, $to, $from ) {
+	
+		// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
+		if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
+			name = $.mobile.transitionFallbacks[ name ];
+		}
+		
+		var deferred = new $.Deferred(),
+			reverseClass = reverse ? " reverse" : "",
+			active	= $.mobile.urlHistory.getActive(),
+			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
+			screenHeight = $.mobile.getScreenHeight(),
+			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
+			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
+			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+			cleanFrom = function(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
 					.height( "" );
-			}
+			},
+			doneOut = function() {
+
+				if ( $from && sequential ) {
+					cleanFrom();
+				}
 			
-			$to.addClass( $.mobile.activePageClass );
+				$to.addClass( $.mobile.activePageClass );
 			
-			if( !none ){
-				$to.animationComplete( doneIn );
-			}
+				if( !none ){
+					$to.animationComplete( doneIn );
+				}
 			
-			// Send focus to page as it is now display: block
-			$.mobile.focusPage( $to );
+				// Send focus to page as it is now display: block
+				$.mobile.focusPage( $to );
 
-			// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
-			$to.height( screenHeight + toScroll );
+				// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+				$to.height( screenHeight + toScroll );
 				
-			$.mobile.silentScroll( toScroll );
+				$.mobile.silentScroll( toScroll );
 			
-			$to.addClass( name + " in" + reverseClass );
+				$to.addClass( name + " in" + reverseClass );
 			
-			if( none ){
-				doneIn();
-			}
+				if( none ){
+					doneIn();
+				}
 			
-		},
+			},
 		
-		doneIn = function() {
-			$to
-				.removeClass( "out in reverse " + name )
-				.height( "" )
-				.parent().removeClass( viewportClass );
+			doneIn = function() {
+			
+				if ( !sequential ) {
+					
+					$.mobile.silentScroll( toScroll );
+					
+					if( $from ){
+						cleanFrom();
+					}
+				}
+			
+				$to
+					.removeClass( "out in reverse " + name )
+					.height( "" )
+					.parent().removeClass( viewportClass );
 
-			deferred.resolve( name, reverse, $to, $from, true );
-		};
-		
-	$to
-		.parent().addClass( viewportClass );
+				deferred.resolve( name, reverse, $to, $from, true );
+			};
+
+		$to
+			.parent().addClass( viewportClass );
 	
-	if ( $from && !none ) {
-		$from
-			.animationComplete( doneOut )
-			.height( screenHeight + $(window ).scrollTop() )
-			.addClass( name + " out" + reverseClass );
-	}
-	else {	
-		doneOut();
-	}
+		if ( $from && !none ) {
+		
+			// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+			if( !sequential ){
+				doneOut();
+			}
+			else {
+				$from.animationComplete( doneOut );	
+			}
+		
+			$from
+				.height( screenHeight + $(window ).scrollTop() )
+				.addClass( name + " out" + reverseClass );
+		}
+		else {	
+			doneOut();
+		}
 
-	return deferred.promise();
+		return deferred.promise();
+	};
 }
 
+// generate the handlers from the above
+var sequentialHandler = createHandler(),
+	simultaneousHandler = createHandler( false );
+
 // Make our transition handler the public default.
-$.mobile.defaultTransitionHandler = outInTransitionHandler;
+$.mobile.defaultTransitionHandler = sequentialHandler;
 
 //transition handler dictionary for 3rd party transitions
 $.mobile.transitionHandlers = {
-	"default": $.mobile.defaultTransitionHandler
+	"default": $.mobile.defaultTransitionHandler,
+	"sequential": sequentialHandler,
+	"simultaneous": simultaneousHandler
 };
 
 $.mobile.transitionFallbacks = {};

From b41840991116710625b5ccae21eeb45d7f563b85 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 26 Mar 2012 16:00:30 +0530
Subject: [PATCH 08/15] updated slide transition to use the simultaneous
 handler.

---
 .../jquery.mobile.transitions.slide.css       | 42 +++++++++++++------
 js/jquery.mobile.transition.slide.js          |  8 +++-
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css
index 27c593752b7..0208291322b 100644
--- a/css/structure/jquery.mobile.transitions.slide.css
+++ b/css/structure/jquery.mobile.transitions.slide.css
@@ -1,20 +1,22 @@
 /* slide transition */
+.slide.out, .slide.in {
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-duration: 350ms;
+	-moz-animation-timing-function: ease-out;
+	-moz-animation-duration: 350ms;
+}
 .slide.out {
 	-webkit-transform: translateX(-100%);
 	-webkit-animation-name: slideouttoleft;
 	-moz-transform: translateX(-100%);
 	-moz-animation-name: slideouttoleft;
-	-webkit-animation-duration: 225ms;
-	-moz-animation-duration: 225ms;
 }
 
 .slide.in {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromright;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
+	-moz-animation-name: slideinfromright;
 }
 
 .slide.out.reverse {
@@ -22,17 +24,31 @@
 	-webkit-animation-name: slideouttoright;
 	-moz-transform: translateX(100%);
 	-moz-animation-name: slideouttoright;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
 }
 
 .slide.in.reverse {
 	-webkit-transform: translateX(0);
-	-webkit-animation-name: fadein;
+	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
-	-moz-animation-name: fadein;
-	-webkit-animation-duration: 200ms;
-	-moz-animation-duration: 200ms;
+	-moz-animation-name: slideinfromleft;
+}
+
+@-webkit-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
 }
 
 @-webkit-keyframes slideouttoleft {
@@ -51,4 +67,4 @@
 @-moz-keyframes slideouttoright {
     from { -moz-transform: translateX(0); }
     to { -moz-transform: translateX(100%); }
-}
\ No newline at end of file
+}
diff --git a/js/jquery.mobile.transition.slide.js b/js/jquery.mobile.transition.slide.js
index 266bdc300a3..5f5266c201b 100644
--- a/js/jquery.mobile.transition.slide.js
+++ b/js/jquery.mobile.transition.slide.js
@@ -3,8 +3,8 @@
 */
 
 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
-//>>description: Fallback transition for slide in non-3D supporting browsers
-//>>label: Slide fallback transition
+//>>description: Handler and fallback transition for slide in non-3D supporting browsers
+//>>label: Slide handler and fallback transition
 //>>group: Transitions
 //>>css: ../css/structure/jquery.mobile.transition.slide.css
 
@@ -12,6 +12,10 @@ define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
 //>>excludeEnd("jqmBuildExclude");
 (function( $, window, undefined ) {
 
+// Use the simultaneous transition handler for slide transitions
+$.mobile.transitionHandlers.slide = $.mobile.transitionHandlers.simultaneous;
+
+// Set the slide transition's fallback to "fade"
 $.mobile.transitionFallbacks.slide = "fade";
 
 })( jQuery, this );

From 9b1a30f4cb88faa4e0637f72c854e1239b529fec Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:03:40 +0530
Subject: [PATCH 09/15] changed default of minScrollBack to 250 - the value
 still claimed in the docs. This reverts @toddparker's change in commit
 a6dc847474cd43b10d85744c66bd1d9ccce1632a, as a higher number is needed when
 reintroducing simultaneous transitions

---
 js/jquery.mobile.core.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/jquery.mobile.core.js b/js/jquery.mobile.core.js
index a0cf1d95596..c659119fda4 100644
--- a/js/jquery.mobile.core.js
+++ b/js/jquery.mobile.core.js
@@ -50,7 +50,7 @@ define( [ "jquery", "../external/requirejs/text!../version.txt", "./jquery.mobil
 		maxTransitionWidth: false,
 
 		// Minimum scroll distance that will be remembered when returning to a page
-		minScrollBack: 10,
+		minScrollBack: 250,
 
 		// DEPRECATED: the following property is no longer in use, but defined until 2.0 to prevent conflicts
 		touchOverflowEnabled: false,

From 2a8d2123ffbb7f6c8fa2deab9a28bfad8b82cd64 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:18:58 +0530
Subject: [PATCH 10/15] reused some code, removed a var

---
 js/jquery.mobile.transition.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 71231ed2373..8e7b3d087d8 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -28,9 +28,11 @@ var createHandler = function( sequential ){
 			active	= $.mobile.urlHistory.getActive(),
 			toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
 			screenHeight = $.mobile.getScreenHeight(),
-			viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
 			maxTransitionOverride = $.mobile.maxTransitionWidth !== false && $( window ).width() > $.mobile.maxTransitionWidth,
 			none = !$.support.cssTransitions || maxTransitionOverride || !name || name === "none",
+			toggleViewportClass = function(){
+				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
+			},
 			cleanFrom = function(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
@@ -77,14 +79,14 @@ var createHandler = function( sequential ){
 			
 				$to
 					.removeClass( "out in reverse " + name )
-					.height( "" )
-					.parent().removeClass( viewportClass );
+					.height( "" );
+				
+				toggleViewportClass();	
 
 				deferred.resolve( name, reverse, $to, $from, true );
 			};
 
-		$to
-			.parent().addClass( viewportClass );
+		toggleViewportClass();
 	
 		if ( $from && !none ) {
 		

From 2c6bfbc29b3d25856f44b8a3e2ad458940874ed9 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 12:42:10 +0530
Subject: [PATCH 11/15] moved the fallback transition check out of the handler
 and into nav.js, where it can properly route to the necessary transition
 handler before calling it.

---
 js/jquery.mobile.navigation.js | 7 ++++++-
 js/jquery.mobile.transition.js | 7 +------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/js/jquery.mobile.navigation.js b/js/jquery.mobile.navigation.js
index de86394c030..7dc47715271 100644
--- a/js/jquery.mobile.navigation.js
+++ b/js/jquery.mobile.navigation.js
@@ -485,7 +485,12 @@ define( [
 
 		//clear page loader
 		$.mobile.hidePageLoadingMsg();
-
+		
+		// If transition is defined, check if css 3D transforms are supported, and if not, if a fallback is specified
+		if( transition && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ transition ] ){
+			transition = $.mobile.transitionFallbacks[ transition ];
+		}
+		
 		//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.
diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 8e7b3d087d8..4e1b58618be 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -17,12 +17,7 @@ var createHandler = function( sequential ){
 	}
 	
 	return function( name, reverse, $to, $from ) {
-	
-		// override name if there's no 3D transform support and a fallback is defined, or if not, to "none"
-		if( name && !$.support.cssTransform3d && $.mobile.transitionFallbacks[ name ] ){
-			name = $.mobile.transitionFallbacks[ name ];
-		}
-		
+
 		var deferred = new $.Deferred(),
 			reverseClass = reverse ? " reverse" : "",
 			active	= $.mobile.urlHistory.getActive(),

From d0fcd6b406a607172a728bfe7eb709232128d490 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Tue, 27 Mar 2012 13:02:53 +0530
Subject: [PATCH 12/15] added back the "slidefade" transition, which is usually
 preferable to "slide", except in cases where a page is short enough that  a
 simultaneous transition sequence won't  jump much (which is needed for a
 regular slide transition). As part of this addition, the keyframes for
 slidein and slideout are now in their own files, as they are dependencies for
 these slide transitions

---
 css/structure/jquery.mobile.structure.css     |  3 ++
 .../jquery.mobile.transitions.slide.css       | 40 +------------------
 .../jquery.mobile.transitions.slidefade.css   | 36 +++++++++++++++++
 ...y.mobile.transitions.slidein.keyframes.css | 18 +++++++++
 ....mobile.transitions.slideout.keyframes.css | 18 +++++++++
 docs/pages/page-transitions.html              |  5 +++
 js/jquery.mobile.transition.slidefade.js      | 21 ++++++++++
 7 files changed, 103 insertions(+), 38 deletions(-)
 create mode 100644 css/structure/jquery.mobile.transitions.slidefade.css
 create mode 100644 css/structure/jquery.mobile.transitions.slidein.keyframes.css
 create mode 100644 css/structure/jquery.mobile.transitions.slideout.keyframes.css
 create mode 100644 js/jquery.mobile.transition.slidefade.js

diff --git a/css/structure/jquery.mobile.structure.css b/css/structure/jquery.mobile.structure.css
index 881878ea331..26f87d32a70 100644
--- a/css/structure/jquery.mobile.structure.css
+++ b/css/structure/jquery.mobile.structure.css
@@ -2,7 +2,10 @@
 @import url( "jquery.mobile.transitions.css" );
 @import url( "jquery.mobile.transitions.fade.css" );
 @import url( "jquery.mobile.transitions.pop.css" );
+@import url( "jquery.mobile.transitions.slidein.keyframes.css" );
+@import url( "jquery.mobile.transitions.slideout.keyframes.css" );
 @import url( "jquery.mobile.transitions.slide.css" );
+@import url( "jquery.mobile.transitions.slidefade.css" );
 @import url( "jquery.mobile.transitions.slidedown.css" );
 @import url( "jquery.mobile.transitions.slideup.css" );
 @import url( "jquery.mobile.transitions.flip.css" );
diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css
index 0208291322b..af2816b229c 100644
--- a/css/structure/jquery.mobile.transitions.slide.css
+++ b/css/structure/jquery.mobile.transitions.slide.css
@@ -1,4 +1,4 @@
-/* slide transition */
+/* slide transition - depends on slidein.keyframes and slideout.keyframes */
 .slide.out, .slide.in {
 	-webkit-animation-timing-function: ease-out;
 	-webkit-animation-duration: 350ms;
@@ -31,40 +31,4 @@
 	-webkit-animation-name: slideinfromleft;
 	-moz-transform: translateX(0);
 	-moz-animation-name: slideinfromleft;
-}
-
-@-webkit-keyframes slideinfromright {
-    from { -webkit-transform: translateX(100%); }
-    to { -webkit-transform: translateX(0); }
-}
-@-moz-keyframes slideinfromright {
-    from { -webkit-transform: translateX(100%); }
-    to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideinfromleft {
-    from { -webkit-transform: translateX(-100%); }
-    to { -webkit-transform: translateX(0); }
-}
-@-moz-keyframes slideinfromleft {
-    from { -webkit-transform: translateX(-100%); }
-    to { -webkit-transform: translateX(0); }
-}
-
-@-webkit-keyframes slideouttoleft {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(-100%); }
-}
-@-moz-keyframes slideouttoleft {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(-100%); }
-}
-
-@-webkit-keyframes slideouttoright {
-    from { -webkit-transform: translateX(0); }
-    to { -webkit-transform: translateX(100%); }
-}
-@-moz-keyframes slideouttoright {
-    from { -moz-transform: translateX(0); }
-    to { -moz-transform: translateX(100%); }
-}
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slidefade.css b/css/structure/jquery.mobile.transitions.slidefade.css
new file mode 100644
index 00000000000..02037aa24a5
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slidefade.css
@@ -0,0 +1,36 @@
+/* slidefade transition - depends on fadein and slidein.keyframes */
+.slidefade.out {
+	-webkit-transform: translateX(-100%);
+	-webkit-animation-name: slideouttoleft;
+	-moz-transform: translateX(-100%);
+	-moz-animation-name: slideouttoleft;
+	-webkit-animation-duration: 225ms;
+	-moz-animation-duration: 225ms;
+}
+
+.slidefade.in {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: slideouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: slideouttoright;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
+
+.slidefade.in.reverse {
+	-webkit-transform: translateX(0);
+	-webkit-animation-name: fadein;
+	-moz-transform: translateX(0);
+	-moz-animation-name: fadein;
+	-webkit-animation-duration: 200ms;
+	-moz-animation-duration: 200ms;
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slidein.keyframes.css b/css/structure/jquery.mobile.transitions.slidein.keyframes.css
new file mode 100644
index 00000000000..a7cb4928317
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slidein.keyframes.css
@@ -0,0 +1,18 @@
+/* keyframes for slidein from sides */
+@-webkit-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromright {
+    from { -webkit-transform: translateX(100%); }
+    to { -webkit-transform: translateX(0); }
+}
+
+@-webkit-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
+@-moz-keyframes slideinfromleft {
+    from { -webkit-transform: translateX(-100%); }
+    to { -webkit-transform: translateX(0); }
+}
\ No newline at end of file
diff --git a/css/structure/jquery.mobile.transitions.slideout.keyframes.css b/css/structure/jquery.mobile.transitions.slideout.keyframes.css
new file mode 100644
index 00000000000..9bea1706b19
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.slideout.keyframes.css
@@ -0,0 +1,18 @@
+/* keyframes for slideout to sides */
+@-webkit-keyframes slideouttoleft {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(-100%); }
+}
+@-moz-keyframes slideouttoleft {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slideouttoright {
+    from { -webkit-transform: translateX(0); }
+    to { -webkit-transform: translateX(100%); }
+}
+@-moz-keyframes slideouttoright {
+    from { -moz-transform: translateX(0); }
+    to { -moz-transform: translateX(100%); }
+}
diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html
index 5be0c00c4ed..daa8989c9e3 100644
--- a/docs/pages/page-transitions.html
+++ b/docs/pages/page-transitions.html
@@ -63,6 +63,11 @@ <h2>Page transitions</h2>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
 				<td><a href="page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
 			</tr>
+			<tr>
+				<th><h3>slidefade</h3></th>
+				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
+				<td><a href="page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
+			</tr>
 			<tr>
 				<th><h3>slide</h3></th>
 				<td><a href="page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
diff --git a/js/jquery.mobile.transition.slidefade.js b/js/jquery.mobile.transition.slidefade.js
new file mode 100644
index 00000000000..300b987c560
--- /dev/null
+++ b/js/jquery.mobile.transition.slidefade.js
@@ -0,0 +1,21 @@
+/*
+* fallback transition for slidefade in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Handler and fallback transition for slide in non-3D supporting browsers
+//>>label: Slide handler and fallback transition
+//>>group: Transitions
+//>>css: ../css/structure/jquery.mobile.transition.slide.css
+
+define( [ "jquery", "./jquery.mobile.transition" ], function( $ ) {
+//>>excludeEnd("jqmBuildExclude");
+(function( $, window, undefined ) {
+
+// Set the slide transition's fallback to "fade"
+$.mobile.transitionFallbacks.slidefade = "fade";
+
+})( jQuery, this );
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
\ No newline at end of file

From 7a05b385b4b9886581c0d62ca9df94a7a9f5fea2 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Thu, 29 Mar 2012 14:05:20 +0530
Subject: [PATCH 13/15] This works around an issue where iOS5 and maybe others
 fail to scroll to the desired location during a transition that uses 3D
 transforms.

---
 js/jquery.mobile.transition.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 4e1b58618be..8fa40462627 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -76,7 +76,13 @@ var createHandler = function( sequential ){
 					.removeClass( "out in reverse " + name )
 					.height( "" );
 				
-				toggleViewportClass();	
+				toggleViewportClass();
+				
+				// In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
+				// This ensures we jump to that spot after the fact, if we aren't there already.
+				if( $( window ).scrollTop() !== toScroll ){
+					$.mobile.silentScroll( toScroll );
+				}
 
 				deferred.resolve( name, reverse, $to, $from, true );
 			};

From 7acaad88a65ff3430c5a20e4373d461d771feed9 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Thu, 29 Mar 2012 14:34:07 +0530
Subject: [PATCH 14/15] another small refactor, not changing a lot, but
 breaking things into specific functions for each stage of the transition -
 helps with clarity. Critically, the silentScroll call is changed to a single
 window.scrollTo, which helps keep things synchronized and sequential.

---
 js/jquery.mobile.transition.js | 59 ++++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index 8fa40462627..b8ba0bb360a 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -33,40 +33,60 @@ var createHandler = function( sequential ){
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
 					.height( "" );
 			},
+			startOut = function(){
+				// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+				if( !sequential ){
+					doneOut();
+				}
+				else {
+					$from.animationComplete( doneOut );	
+				}
+				
+				// Set the from page's height and start it transitioning out
+				// Note: setting an explicit height helps eliminate tiling in the transitions
+				$from
+					.height( screenHeight + $(window ).scrollTop() )
+					.addClass( name + " out" + reverseClass );
+			},
+			
 			doneOut = function() {
 
 				if ( $from && sequential ) {
 					cleanFrom();
 				}
+				
+				startIn();
+			},
 			
-				$to.addClass( $.mobile.activePageClass );
+			startIn = function(){	
 			
-				if( !none ){
-					$to.animationComplete( doneIn );
-				}
+				$to.addClass( $.mobile.activePageClass );				
 			
 				// Send focus to page as it is now display: block
 				$.mobile.focusPage( $to );
 
-				// Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+				// Set to page height
 				$to.height( screenHeight + toScroll );
 				
-				$.mobile.silentScroll( toScroll );
-			
+				// By using scrollTo instead of silentScroll, we can keep things better in order
+				window.scrollTo( 0, toScroll );
+				
+				if( !none ){
+					$to.animationComplete( doneIn );
+				}
+				
 				$to.addClass( name + " in" + reverseClass );
-			
+				
 				if( none ){
 					doneIn();
 				}
-			
+				
 			},
 		
 			doneIn = function() {
 			
 				if ( !sequential ) {
 					
-					$.mobile.silentScroll( toScroll );
-					
 					if( $from ){
 						cleanFrom();
 					}
@@ -81,7 +101,7 @@ var createHandler = function( sequential ){
 				// In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
 				// This ensures we jump to that spot after the fact, if we aren't there already.
 				if( $( window ).scrollTop() !== toScroll ){
-					$.mobile.silentScroll( toScroll );
+					window.scrollTo( 0, toScroll );
 				}
 
 				deferred.resolve( name, reverse, $to, $from, true );
@@ -90,20 +110,9 @@ var createHandler = function( sequential ){
 		toggleViewportClass();
 	
 		if ( $from && !none ) {
-		
-			// if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
-			if( !sequential ){
-				doneOut();
-			}
-			else {
-				$from.animationComplete( doneOut );	
-			}
-		
-			$from
-				.height( screenHeight + $(window ).scrollTop() )
-				.addClass( name + " out" + reverseClass );
+			startOut();
 		}
-		else {	
+		else {
 			doneOut();
 		}
 

From 55609118207bef7e17650ed9365f06b41b0a69f7 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Thu, 29 Mar 2012 16:16:06 +0530
Subject: [PATCH 15/15] since we're not using silentScroll, manually disable
 scrollstart listening during scroll to match its behavior

---
 js/jquery.mobile.transition.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/js/jquery.mobile.transition.js b/js/jquery.mobile.transition.js
index b8ba0bb360a..7554f4cd248 100644
--- a/js/jquery.mobile.transition.js
+++ b/js/jquery.mobile.transition.js
@@ -28,6 +28,18 @@ var createHandler = function( sequential ){
 			toggleViewportClass = function(){
 				$.mobile.pageContainer.toggleClass( "ui-mobile-viewport-transitioning viewport-" + name );
 			},
+			scrollPage = function(){
+				// By using scrollTo instead of silentScroll, we can keep things better in order
+				// Just to be precautios, disable scrollstart listening like silentScroll would
+				$.event.special.scrollstart.enabled = false;
+				
+				window.scrollTo( 0, toScroll );
+				
+				// reenable scrollstart listening like silentScroll would
+				setTimeout(function() {
+					$.event.special.scrollstart.enabled = true;
+				}, 150 );
+			},
 			cleanFrom = function(){
 				$from
 					.removeClass( $.mobile.activePageClass + " out in reverse " + name )
@@ -68,8 +80,7 @@ var createHandler = function( sequential ){
 				// Set to page height
 				$to.height( screenHeight + toScroll );
 				
-				// By using scrollTo instead of silentScroll, we can keep things better in order
-				window.scrollTo( 0, toScroll );
+				scrollPage();
 				
 				if( !none ){
 					$to.animationComplete( doneIn );
@@ -101,7 +112,7 @@ var createHandler = function( sequential ){
 				// In some browsers (iOS5), 3D transitions block the ability to scroll to the desired location during transition
 				// This ensures we jump to that spot after the fact, if we aren't there already.
 				if( $( window ).scrollTop() !== toScroll ){
-					window.scrollTo( 0, toScroll );
+					scrollPage();
 				}
 
 				deferred.resolve( name, reverse, $to, $from, true );