don't use pre transitioning class, or viewport class for this transition handler. Instead, activate page early, then scroll to desired spot, and transition in. In order to make this work, I had to add an argument to the end of the promise, letting navigation know that the page is already focused, so don't do it over again. This should make for a smooth transition from point-a to point-b, without a visible scroll jump. Needs testing!

This commit is contained in:
scottjehl 2011-12-30 14:43:12 +07:00
parent 955a37f1e8
commit 445d11c704
2 changed files with 13 additions and 14 deletions

View file

@ -1150,7 +1150,7 @@ define( [
settings.reverse = settings.reverse || historyDir < 0;
transitionPages( toPage, fromPage, settings.transition, settings.reverse )
.done(function() {
.done(function( name, reverse, $to, $from, alreadyFocused ) {
removeActiveLinkClass();
//if there's a duplicateCachedPage, remove it from the DOM now that it's hidden
@ -1165,7 +1165,9 @@ define( [
// itself to avoid ie bug that reports offsetWidth as > 0 (core check for visibility)
// despite visibility: hidden addresses issue #2965
// https://github.com/jquery/jquery-mobile/issues/2965
$.mobile.focusPage( toPage );
if( !alreadyFocused ){
$.mobile.focusPage( toPage );
}
releasePageTransitionLock();

View file

@ -11,22 +11,21 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) {
active = $.mobile.urlHistory.getActive(),
touchOverflow = $.support.touchOverflow && $.mobile.touchOverflowEnabled,
toScroll = active.lastScroll || ( touchOverflow ? 0 : $.mobile.defaultHomeScroll ),
viewportClass = "ui-mobile-viewport-transitioning viewport-" + name,
preTransClass = "ui-mobile-pre-transition",
viewportClass = "viewport-" + name,
doneOut = function() {
if ( $from ) {
$from.removeClass( $.mobile.activePageClass + " " + preTransClass + " out in reverse " + name );
$from.removeClass( $.mobile.activePageClass + " out in reverse " + name );
}
$to
.animationComplete( doneIn )
.addClass( preTransClass );
.addClass( $.mobile.activePageClass );
// Send focus to page as it is now display: block
$.mobile.focusPage( $to );
if( touchOverflow && toScroll ){
// Send focus to page as it is now display: block
$.mobile.focusPage( $to );
//set page's scrollTop to remembered distance
if( $to.is( ".ui-native-fixed" ) ){
@ -42,21 +41,19 @@ function fadeOutInTransitionHandler( name, reverse, $to, $from ) {
$.mobile.silentScroll( toScroll );
}
$to.addClass( $.mobile.activePageClass + " " + name + " in" + reverseClass );
$to.addClass( name + " in" + reverseClass );
},
doneIn = function() {
$to
.removeClass( "out in reverse " + name + " " + preTransClass )
.removeClass( "out in reverse " + name )
.parent().removeClass( viewportClass );
deferred.resolve( name, reverse, $to, $from );
deferred.resolve( name, reverse, $to, $from, true );
};
$to.parent().addClass( viewportClass );
//clear page loader
$.mobile.hidePageLoadingMsg();