Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-19 20:01:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#455] For the transitions we now have overflow: hidden in order to limit the flickering. We always scroll to the top before we start our transitions in order to make it scroll. The CSS changed to have overflow: hidden during transitions and have a height that is larger enough to keep the address bar hidden.

Browse source
This commit is contained in:
Jesse Streb 2011-01-26 20:41:30 -05:00
parent e2c66fad49
commit 378fb51225
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
js/jquery.mobile.navigation.js
View file

@ -322,6 +322,7 @@
//function for transitioning between two existing pages
function transitionPages() {
$.mobile.silentScroll();
//get current scroll distance
var currScroll = $window.scrollTop(),
@ -341,9 +342,6 @@
to.data("page")._trigger("beforeshow", {prevPage: from});
function loadComplete(){
$.mobile.pageLoading( true );
reFocus( to );
if( changeHash !== false && url ){
if( !back ){
@ -360,8 +358,9 @@
removeActiveLinkClass();
//jump to top or prev scroll, if set
$.mobile.silentScroll( to.data( 'lastScroll' ) );
//jump to top or prev scroll, sometimes on iOS the page has not rendered yet. I could only get by this with a setTimeout, but would like to avoid that.
$.mobile.silentScroll( to.data( 'lastScroll' ) );
reFocus( to );
//trigger show/hide events, allow preventing focus change through return false
from.data("page")._trigger("hide", null, {nextPage: to});
@ -391,16 +390,21 @@
if(transition && (transition !== 'none')){
$.mobile.pageLoading( true );
if( $.inArray(transition, perspectiveTransitions) >= 0 ){
addContainerClass('ui-mobile-viewport-perspective');
}
addContainerClass('ui-mobile-viewport-transitioning');
// animate in / out
from.addClass( transition + " out " + ( reverse ? "reverse" : "" ) );
/* animate in / out
* This is in a setTimeout because we were often seeing pages in not animate across but rather go straight to
* the 'to' page. The loadComplete would still fire, so the browser thought it was applying the animation. From
* what I could tell this was a problem with the classes not being applied yet.
*/
setTimeout(function() { from.addClass( transition + " out " + ( reverse ? "reverse" : "" ) );
to.addClass( $.mobile.activePageClass + " " + transition +
" in " + ( reverse ? "reverse" : "" ) );
" in " + ( reverse ? "reverse" : "" ) ); } , 0);
// callback - remove classes, etc
to.animationComplete(function() {
@ -411,6 +415,7 @@
});
}
else{
$.mobile.pageLoading( true );
from.removeClass( $.mobile.activePageClass );
to.addClass( $.mobile.activePageClass );
loadComplete();

3
themes/default/jquery.mobile.transitions.css
View file

@ -159,7 +159,8 @@ Built by David Kaneda and maintained by Jonathan Stark.
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
height: 100%;
height: 120%; /* we want to make sure we take up enough to keep the scroll top hidden during transition, but not too much to overflow our buffer */
overflow: hidden;
}
.flip {