updated slide transition to use the simultaneous handler.

gseguin · Mar 27, 2012 · 3104052 · 3104052
1 parent 99e9eb2
commit 3104052
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/css/structure/jquery.mobile.transitions.slide.css b/css/structure/jquery.mobile.transitions.slide.css
@@ -1,38 +1,54 @@
 /* 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 {
 	-webkit-transform: translateX(100%);
 	-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%); }
-}
+}
diff --git a/js/jquery.mobile.transition.slide.js b/js/jquery.mobile.transition.slide.js
@@ -3,15 +3,19 @@
 */
 
 //>>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
 
 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 );