Browse files

updated slide transition to use the simultaneous handler.

  • Loading branch information...
1 parent d9b83b2 commit b41840991116710625b5ccae21eeb45d7f563b85 scottjehl committed Mar 26, 2012
Showing with 35 additions and 15 deletions.
  1. +29 −13 css/structure/jquery.mobile.transitions.slide.css
  2. +6 −2 js/jquery.mobile.transition.slide.js
View
42 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%); }
-}
+}
View
8 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 );

0 comments on commit b418409

Please sign in to comment.