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
jquery-archive · Mar 27, 2012 · 72bd778 · 72bd778
1 parent ee6d656
commit 72bd778
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 38 deletions.
diff --git 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
@@ -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%); }
-}
+}
diff --git a/css/structure/jquery.mobile.transitions.slidefade.css 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;
+}
diff --git a/css/structure/jquery.mobile.transitions.slidein.keyframes.css 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); }
+}
diff --git a/css/structure/jquery.mobile.transitions.slideout.keyframes.css 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
@@ -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
@@ -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");