Skip to content
Browse files

wrapped and refactored portions of the default transitionHandler func…

…tion to allow for sequential or simultaneous transitions. The default sequential transition handler for 1.1 should not change at all. Both types are defined as different transition handlers ($.mobile.transitionHandlers.simultaneous and $.mobile.transitionHandlers.sequential), though their logic is shared internally by both to keep overhead low. As was already the case, custom transitions can define a non-default handler by defining a transition handler named the same as the css transition, and referencing one of the existing handlers (or an entirely new one).
  • Loading branch information...
1 parent 3ef15b8 commit d9b83b2b822430f3510d33b69e341ace1b6d872a scottjehl committed Mar 26, 2012
Showing with 87 additions and 52 deletions.
  1. +87 −52 js/jquery.mobile.transition.js
View
139 js/jquery.mobile.transition.js
@@ -9,82 +9,117 @@ 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() {
-
- if ( $from ) {
+ return function( name, reverse, $to, $from ) {
+
+ // 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 ];
+ }
+
+ 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",
+ cleanFrom = function(){
$from
.removeClass( $.mobile.activePageClass + " out in reverse " + name )
.height( "" );
- }
+ },
+ doneOut = function() {
+
+ if ( $from && sequential ) {
+ cleanFrom();
+ }
- $to.addClass( $.mobile.activePageClass );
+ $to.addClass( $.mobile.activePageClass );
- if( !none ){
- $to.animationComplete( doneIn );
- }
+ if( !none ){
+ $to.animationComplete( doneIn );
+ }
- // Send focus to page as it is now display: block
- $.mobile.focusPage( $to );
+ // Send focus to page as it is now display: block
+ $.mobile.focusPage( $to );
- // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
- $to.height( screenHeight + toScroll );
+ // Jump to top or prev scroll, sometimes on iOS the page has not rendered yet.
+ $to.height( screenHeight + toScroll );
- $.mobile.silentScroll( toScroll );
+ $.mobile.silentScroll( toScroll );
- $to.addClass( name + " in" + reverseClass );
+ $to.addClass( name + " in" + reverseClass );
- if( none ){
- doneIn();
- }
+ if( none ){
+ doneIn();
+ }
- },
+ },
- doneIn = function() {
- $to
- .removeClass( "out in reverse " + name )
- .height( "" )
- .parent().removeClass( viewportClass );
+ doneIn = function() {
+
+ if ( !sequential ) {
+
+ $.mobile.silentScroll( toScroll );
+
+ if( $from ){
+ cleanFrom();
+ }
+ }
+
+ $to
+ .removeClass( "out in reverse " + name )
+ .height( "" )
+ .parent().removeClass( viewportClass );
- deferred.resolve( name, reverse, $to, $from, true );
- };
-
- $to
- .parent().addClass( viewportClass );
+ deferred.resolve( name, reverse, $to, $from, true );
+ };
+
+ $to
+ .parent().addClass( viewportClass );
- if ( $from && !none ) {
- $from
- .animationComplete( doneOut )
- .height( screenHeight + $(window ).scrollTop() )
- .addClass( name + " out" + reverseClass );
- }
- else {
- doneOut();
- }
+ if ( $from && !none ) {
+
+ // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
+ if( !sequential ){
+ doneOut();
+ }
+ else {
+ $from.animationComplete( doneOut );
+ }
+
+ $from
+ .height( screenHeight + $(window ).scrollTop() )
+ .addClass( name + " out" + reverseClass );
+ }
+ 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 = {};

0 comments on commit d9b83b2

Please sign in to comment.
Something went wrong with that request. Please try again.