Response title
This is preview!
Move this topic
Slide transition difference between 1.0 and 1.1.0rc
in jQuery Mobile
•
8 years ago
There's a difference in transition effects between versions 1.0 and 1.1.0rc1 that's pretty much a gamebreaker for me. If i can't make the slide transitions work like 1.0 in 1.1.0 i'm going to have to scrap my app and go with jqtouch. I would just use 1.0, but 1.0 doesn't preserve the scroll position (it scrolls to top before the transition, another gamebreaker because that doesn't happen in jqtouch). I did try using 1.0 with iscroll, but then my slide transitions had the same white space that i get in 1.1.0rc which isn't going to work.
What was the reasoning behind changing the transition behavior? Is it a side effect of preventing the jump to top?
compare the slide effect on these two pages:
1
Replies(12)
I guess i could try to build my own transition handler.
As a matter of fact, that may be the fastest and easiest way for me to get the exact transition functionality i'm looking for.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Hi Kevin
This may help if your looking to roll your own.
I haven't had the time do get deeply into it but I'm very interested.
chris
Leave a comment on clejeune8's reply
There are several reasons for the change most of them had to do with the scroll jump and performance on android. the change is well documented in the release blog and docs.
the best solution iv found so far is to define my own css transitions using the css from 1.01. there is still one main difference doing this though ill use slide as an example. with 1.01 page a slides out at the same time as page b slides in with custom css from 1.01 in 1.1 page a slides out THEN page b slides in this all happens pretty fast and i found it to be an acceptable solution. To take it a step further you can write your own transition handler function i tried this and got it working pretty well mimicing 1.01 but there were a few bugs still and i eventually decided that out then in was acceptable. as long as both slide and there is no fade i really disliked the fade.
if you want more info live examples ect just let me know or if you want what i came up with for a transition handler and maybe you can work the bugs out.
Leave a comment on arschmitz's reply
Thanks, i'll be digging into this tomorrow morning.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
I ended up having to put this off, but now i was able to get back to it.
however, now my page is jumping to top before the animation again, though atleast it is smooth on a mobile device. I'm going to have to combine the two more than likely, but i'm out of time for today. I'll check back in on this later.
-- Kevin
I tried the current state of the 1.1.0 nightly transition and it still isn't quite what we want.
Here's my current animation function, however it of course isn't very smooth on a mobile device (but it's great on a pc)
- function mySlideTransition(name, reverse, $to, $from) {
- var deferred = new $.Deferred()
- active = $.mobile.urlHistory.getActive(),
- toScroll = active.lastScroll || $.mobile.defaultHomeScroll,
- screenHeight = $.mobile.getScreenHeight(),
- screenWidth = $(window).width();
- if (reverse) {
- $to.css({'left':-screenWidth,'top':toScroll}).addClass( $.mobile.activePageClass );
- $to.add($from).animate({'left': '+=' + screenWidth},300).promise().done(function(){
- $from.removeClass( $.mobile.activePageClass ).css('left',0);
- deferred.resolve();
- });
- }
- else {
- $to.css({'left':screenWidth,'top':toScroll}).addClass( $.mobile.activePageClass );
- $to.add($from).animate({'left': '-=' + screenWidth},300).promise().done(function(){
- $from.removeClass( $.mobile.activePageClass ).css('left',0);
- deferred.resolve();
- });
- }
- return deferred.promise();
- }
I'm not too worried about scroll position on the to page at this point, I can fix that later. What i'm having a problem with right now is that this animation is not very smooth on a mobile device.
I can get almost the same effect by overriding the default slide css animation by using:
- .slide.in {
- -webkit-animation-name: slideintoright;
- -moz-animation-name: slideintoright;
- -webkit-animation-duration: 200ms;
- -moz-animation-duration: 200ms;
- }
- .slide.in.reverse {
- -webkit-animation-name: slideintoleft;
- -moz-animation-name: slideintoleft;
- -webkit-animation-duration: 200ms;
- -moz-animation-duration: 200ms;
- }
- @-webkit-keyframes slideintoright {
- from { -webkit-transform: translateX(200%); }
- to { -webkit-transform: translateX(0); }
- }
- @-moz-keyframes slideintoright {
- from { -moz-transform: translateX(200%); }
- to { -moz-transform: translateX(0); }
- }
- @-webkit-keyframes slideintoleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-moz-keyframes slideintoleft {
- from { -moz-transform: translateX(-100%); }
- to { -moz-transform: translateX(0); }
- }
-- Kevin
Leave a comment on Kevin B's reply
Here's the combination of the two which seems to work, but needs to be tested more:
-- Kevin
- <style>
- .slide.in {
- -webkit-animation-name: slideintoright;
- -moz-animation-name: slideintoright;
- -webkit-animation-duration: 200ms;
- -moz-animation-duration: 200ms;
- }
- .slide.in.reverse {
- -webkit-animation-name: slideintoleft;
- -moz-animation-name: slideintoleft;
- -webkit-animation-duration: 200ms;
- -moz-animation-duration: 200ms;
- }
- @-webkit-keyframes slideintoright {
- from { -webkit-transform: translateX(200%); }
- to { -webkit-transform: translateX(0); }
- }
- @-moz-keyframes slideintoright {
- from { -moz-transform: translateX(200%); }
- to { -moz-transform: translateX(0); }
- }
- @-webkit-keyframes slideintoleft {
- from { -webkit-transform: translateX(-100%); }
- to { -webkit-transform: translateX(0); }
- }
- @-moz-keyframes slideintoleft {
- from { -moz-transform: translateX(-100%); }
- to { -moz-transform: translateX(0); }
- }
- </style>
- <script>
- function mySlideTransition(name, reverse, $to, $from) {
- var deferred = new $.Deferred()
- active = $.mobile.urlHistory.getActive(),
- toScroll = $('body').scrollTop(),
- screenHeight = $.mobile.getScreenHeight(),
- screenWidth = $(window).width(),
- toClasses = reverse ? ' slide in reverse' : ' slide in',
- fromClasses = reverse ? ' slide out reverse' : ' slide out';
- $to.css('top',toScroll);
- $to.addClass( $.mobile.activePageClass + toClasses );
- $from.addClass( fromClasses );
- $to.animationComplete(function(){
- $from.removeClass($.mobile.activePageClass);
- $from.add($to).removeClass('slide in out reverse');
- $to.css('top','0');
- $.mobile.silentScroll(0);
- $('body').removeClass('transitioning');
- deferred.resolve();
- });
- return deferred.promise();
- }
- $(document).bind("mobileinit", function(){
- $.extend($.mobile, {
- defaultPageTransition: "slide",
- loadingMessage: ""
- });
- $.mobile.transitionHandlers["slide"] = mySlideTransition;
- });
- </script>
-- Kevin
Leave a comment on Kevin B's reply
nice work. However i know you mentioned you tried the nightly build when did you do this because end of last week they went back to the old slide transition but with a few minor improvements. Its been working great for me. Note you will see a scroll jump on long pages but there are some ways around this useing silent scroll and min scroll distance.
Leave a comment on arschmitz's reply
the nightly build is working much better now. there's a new jump happening on the $to page now, but i wouldn't be surprised if that's fixed by the time it's released. The only issue is I have to have a working solution to this and a finished app within 4 weeks, if 1.1.0 isn't released by then i would be going with 1.0 and the custom transition until it is finished.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Yeah iv noticed that jump as well. I belive they plan to have 1.1rc2 out by then but havent seen any real date yet
Leave a comment on arschmitz's reply
The new 1.1.0RC2 goes back to the jump to top. I do see why they did it, it just isn't going to work for me.
I'm going to need to look into this statement:
I'm going to need to look into this statement:
What i'm wondering is, what is the difference between the two? does 1.0 do both slide in and out at the same time while 1.1 does one, and then the other when one is finished?We’re happy to announce that there is now a way to define a transition handler sequence: sync (1.0-style) and async (1.1-style) when authoring a new transition.
I understand that animating both pages isn't going to work very well on large pages or on certain devices, but for the devices that it works well on (such as iOS5) i really need that transition to work. My plan is to implement my own custom slide transition for iOS5 then fallback to the default fade animation for everything else.
My current custom transition is the js code above without any of the css changes, i went back to the ones jqm defines since it was changed back to slide from fade. It now slides smoothly, but there's a jump on the to page at the top.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
The scroll jump is impossible to remove with out going to a blank in between. Thats why they only recommend the sync transition for short pages from the release blog
Since we support such a wide range of devices, we need to manage scroll position because both the page you’re on and the page you’re animating to are sitting in the same viewport. This means that if you are scrolled down on a page and click a link, we need to scroll to the top of the window at some point in the transition sequence.
Basicly if they didnt scroll to the top you would load the next page already scrolled down! or if the next page was short it would transition to nothing at all. This certainly would not work well!
Leave a comment on arschmitz's reply
Basicly if they didnt scroll to the top you would load the next page already scrolled down! or if the next page was short it would transition to nothing at all. This certainly would not work well!
I'm solving that in the same way that jqtouch does it; i'm offsetting the top position of the $to page to the current scrollTop position so that when it animates both pages to the left, the top of the $to page is at the top of the viewport, even though it is not at the top of the page. I then set it's top to 0 and silentscroll to top.
However, doing so caused a jump at the top, so i switched it around and i'm now offsetting the $from page to a -scrollTop and it seems to be solving the problem for me.
- function mySlideTransition(name, reverse, $to, $from) {
- var deferred = new $.Deferred()
- toScroll = $('body').scrollTop(),
- toClasses = reverse ? ' slide in reverse' : ' slide in',
- fromClasses = reverse ? ' slide out reverse' : ' slide out';
- $from.css('top',-toScroll).addClass( fromClasses );
- $to.addClass( $.mobile.activePageClass + toClasses );
- $to.animationComplete(function(){
- $from.css('top','0').removeClass($.mobile.activePageClass).add($to).removeClass('slide in out reverse');
- deferred.resolve();
- });
- return deferred.promise();
- }
currently there's a consistent 1 or 2 pixel jump happening before and after transition
-- 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 Kevin B's question