Response title
This is preview!
Move this topic
Reverting to 1.0.1 Page Transitions
in jQuery Mobile
•
10 years ago
I know this is a hot topic, but I get asked a lot about how to get 1.0.1 transitions in 1.1.0. So much that I finally figured it out. I have to admit, I'm liking it in this current iOS app. If I was supporting Droid at the moment though, I might think differently, haha.
2
Replies(4)
Re: Reverting to 1.0.1 Page Transitions
10 years ago
i'm following your progress.... very useful to port 1.0.1 transition in jqm 1.1.0 fot iOS.
Bye
Bye
Leave a comment on mypregnancy2010's reply
Re: Reverting to 1.0.1 Page Transitions
10 years ago
I'm going to just continue the discussion we were having on your blog here.
-- Kevin
Basically, instead of modifying the jquerymobile.js, i'm using this (in addition to the additional css file explained in the blog post):
- $(document).bind("mobileinit", function(){
- $.mobile.defaultTransitionHandler = function( name, reverse, $to, $from ) {
- var deferred = new $.Deferred(),
- sequential = false,
- 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(pos,t){
- // 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, pos );
- if (t) {
- $from.css("top",-t);
- }
- // 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( "" );
- },
- startOut = function(){
- // if it's not sequential, call the doneOut transition to start the TO page animating in simultaneously
- if( !sequential ){
- scrollPage(0,$(window).scrollTop());
- 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 );
- },
- doneOut = function() {
- if ( $from && sequential ) {
- cleanFrom();
- }
- startIn();
- },
- startIn = function(){
- $to.addClass( $.mobile.activePageClass );
- // Send focus to page as it is now display: block
- $.mobile.focusPage( $to );
- // Set to page height
- $to.height( screenHeight + toScroll );
- //scrollPage(toScroll);
- if( !none ){
- $to.animationComplete( doneIn );
- }
- $to.addClass( name + " in" + reverseClass );
- if( none ){
- doneIn();
- }
- },
- doneIn = function() {
- if ( !sequential ) {
- if( $from ){
- cleanFrom();
- $from.css("top",0);
- }
- }
- $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(toScroll);
- //}
- deferred.resolve( name, reverse, $to, $from, true );
- };
- toggleViewportClass();
- if ( $from && !none ) {
- startOut();
- }
- else {
- doneOut();
- }
- return deferred.promise();
- };
- $.mobile.transitionHandlers = { "default" : $.mobile.defaultTransitionHandler };
- $.extend($.mobile, {
- defaultPageTransition: "slide"
- });
- });
The changes in green and red are the ones i'm making to attempt to get rid of the page jump on the from page and cause the to page to always come in scrolled to the top.
Currently, these two lines are causing a problem:
- window.scrollTo( 0, pos );
- if (t) {
- $from.css("top",-t);
- }
The scrollTo is rendered before the $from.css(...), causing a page jump. First, it scrolls to the top, then i offset the page so that it doesn't look like it is scrolled to top. I need both to happen at the same time with 1 render.
I have tried doing it the other way where instead of offsetting the from page, i offset the to page then correct the scroll on that page after the transition, however the same effect occurs.
-- Kevin
Leave a comment on Kevin B's reply
Re: Reverting to 1.0.1 Page Transitions
10 years ago
I'm about to try this with 1.1.1. Anybody do this successfully, or have any issues with 1.1.1?
To clarify, I just need to the 1.0 transitions as they worked in 1.0. I don't need any "scroll to top" functionality (don't want it, in fact) because I'm using iScroll and all my pages are device height. so, I think that simplifies it.
There's no hope for the 1.1.1 transitions if you want to get something through Apple App Store approval. They are just too janky.
To clarify, I just need to the 1.0 transitions as they worked in 1.0. I don't need any "scroll to top" functionality (don't want it, in fact) because I'm using iScroll and all my pages are device height. so, I think that simplifies it.
There's no hope for the 1.1.1 transitions if you want to get something through Apple App Store approval. They are just too janky.
Leave a comment on watusiware's reply
Re: Reverting to 1.0.1 Page Transitions
10 years ago
It definitely works as far as getting back to the 1.0 transitions, it just doesn't work for me because i need to also prevent the jump.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to zSprawl's idea