Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'tss'

  • Loading branch information...
commit 88cda0bddd4bce9107115a37889899b4bea13403 2 parents 8b97e3c + 5560911
@johnbender johnbender authored
View
3  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" );
View
42 css/structure/jquery.mobile.transitions.slide.css
@@ -1,20 +1,22 @@
-/* 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;
+ -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,33 +24,11 @@
-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;
-}
-
-@-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%); }
+ -moz-animation-name: slideinfromleft;
}
View
36 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;
+}
View
18 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); }
+}
View
18 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%); }
+}
View
5 docs/pages/page-transitions.html
@@ -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>
View
2  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,
View
7 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.
View
164 js/jquery.mobile.transition.js
@@ -9,82 +9,140 @@ 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() {
+ return function( name, reverse, $to, $from ) {
- if ( $from ) {
+ var deferred = new $.Deferred(),
+ reverseClass = reverse ? " reverse" : "",
+ active = $.mobile.urlHistory.getActive(),
+ toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
+ screenHeight = $.mobile.getScreenHeight(),
+ 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 );
+ },
+ 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 )
.height( "" );
- }
-
- $to.addClass( $.mobile.activePageClass );
-
- if( !none ){
- $to.animationComplete( doneIn );
- }
+ },
+ 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 );
+ },
- // Send focus to page as it is now display: block
- $.mobile.focusPage( $to );
+ doneOut = function() {
- // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
- $to.height( screenHeight + toScroll );
+ if ( $from && sequential ) {
+ cleanFrom();
+ }
- $.mobile.silentScroll( toScroll );
+ startIn();
+ },
- $to.addClass( name + " in" + reverseClass );
+ startIn = function(){
- if( none ){
- doneIn();
- }
+ $to.addClass( $.mobile.activePageClass );
- },
-
- doneIn = function() {
- $to
- .removeClass( "out in reverse " + name )
- .height( "" )
- .parent().removeClass( viewportClass );
+ // Send focus to page as it is now display: block
+ $.mobile.focusPage( $to );
- deferred.resolve( name, reverse, $to, $from, true );
- };
+ // Set to page height
+ $to.height( screenHeight + toScroll );
+
+ scrollPage();
+
+ if( !none ){
+ $to.animationComplete( doneIn );
+ }
+
+ $to.addClass( name + " in" + reverseClass );
+
+ if( none ){
+ doneIn();
+ }
+
+ },
- $to
- .parent().addClass( viewportClass );
+ doneIn = function() {
+
+ if ( !sequential ) {
+
+ if( $from ){
+ cleanFrom();
+ }
+ }
+
+ $to
+ .removeClass( "out in reverse " + name )
+ .height( "" );
+
+ 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 ){
+ scrollPage();
+ }
+
+ deferred.resolve( name, reverse, $to, $from, true );
+ };
+
+ toggleViewportClass();
- if ( $from && !none ) {
- $from
- .animationComplete( doneOut )
- .height( screenHeight + $(window ).scrollTop() )
- .addClass( name + " out" + reverseClass );
- }
- else {
- doneOut();
- }
+ if ( $from && !none ) {
+ startOut();
+ }
+ 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 = {};
View
8 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 );
View
21 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");
Please sign in to comment.
Something went wrong with that request. Please try again.