Permalink
Browse files

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
  • Loading branch information...
1 parent 2c6bfbc commit d0fcd6b406a607172a728bfe7eb709232128d490 scottjehl committed Mar 27, 2012
@@ -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" );
@@ -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%); }
-}
+}
@@ -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;
+}
@@ -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); }
+}
@@ -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%); }
+}
@@ -64,6 +64,11 @@
<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>
<td><a href="page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
@@ -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");

0 comments on commit d0fcd6b

Please sign in to comment.