Reversing transition directon with jQuery Mobile

See http://deliverymobile.binkcms.com/home-page.html.  Click the hamburger menu, then click sign-in.

I'm trying to use a transition to bring in the sub-menu.  I got it to slide, but the default direction is to slide in from the right.  I want it to slide in from and slide out to the left side.  I tried using data-direction="reverse" on the triggering link, to no effect.  When I use data-transition="reverse slide", the sub-menu slides in from the left, but still slides off to the right.  

I even tried a small edit to the CSS file, exchanging the definitions of .slide.out and .slide.out.reverse.  That gives me the effect I want, but it also makes the "normal" direction (i.e., not reverse) slide off weird.  I'd rather not edit the jQuery source, anyways.

Where am I going wrong?
LVL 52
Steve BinkAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Bob LearnedCommented:
1) What does your CSS for .slide.out and .slide.out.reverse look like?

2) JQuery Mobile Page Transitions
http://demos.jquerymobile.com/1.0/docs/pages/page-transitions.html

               .slide.in.reverse {
		    -webkit-transform: translateX(0);
		    -webkit-animation-name: slideinfromleft;
		}

		.slide.out.reverse {
		    -webkit-transform: translateX(100%);
		    -webkit-animation-name: slideouttoright;
		}

		@-webkit-keyframes slideinfromleft {
		    from { -webkit-transform: translateX(-100%); }
		    to { -webkit-transform: translateX(0); }
		}

		@-webkit-keyframes slideouttoright {
		    from { -webkit-transform: translateX(0); }
		    to { -webkit-transform: translateX(100%); }
		}

Open in new window

Steve BinkAuthor Commented:
I'm using the standard jquery-mobile-1.4.5.css.  Here's the relevant excerpt:
.slide.out, .slide.in {
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-duration: 350ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-duration: 350ms;
	animation-timing-function: ease-out;
	animation-duration: 350ms;
}
.slide.out {
	-webkit-transform: translate3d(-100%,0,0);
	-webkit-animation-name: slideouttoleft;
	-moz-transform: translateX(-100%);
	-moz-animation-name: slideouttoleft;
	transform: translateX(-100%);
	animation-name: slideouttoleft;
}
.slide.in {
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation-name: slideinfromright;
	-moz-transform: translateX(0);
	-moz-animation-name: slideinfromright;
	transform: translateX(0);
	animation-name: slideinfromright;
}
.slide.out.reverse {
	-webkit-transform: translate3d(100%,0,0);
	-webkit-animation-name: slideouttoright;
	-moz-transform: translateX(100%);
	-moz-animation-name: slideouttoright;
	transform: translateX(100%);
	animation-name: slideouttoright;
}
.slide.in.reverse {
	-webkit-transform: translate3d(0,0,0);
	-webkit-animation-name: slideinfromleft;
	-moz-transform: translateX(0);
	-moz-animation-name: slideinfromleft;
	transform: translateX(0);
	animation-name: slideinfromleft;
}

Open in new window

I was pulling it straight from the CDN, but downloaded a local copy for troubleshooting this issue.  From the main HTML:
    <!-- <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> -->
    <link rel="stylesheet" href="/css/jquery.mobile-1.4.5.css">

Open in new window

In researching this issue, I have, of course, gone through that docs page and many others.  I found this issue which addresses this very problem, but the fix does not seem to apply to the current codebase.  The PR for it seems to have withered and died, though, so this issue does not appear to be resolved.  The existing code certainly does no checks for direction...not even data-direction, as far as I can tell.
Bob LearnedCommented:
1) The "this issue" link points to the code above.

2) The PR points to this link:

https://github.com/jquery/jquery-mobile/issues/5134

jquery mobile version 1.2.0

...

This has since been fixed we added direction tracking to all page changes closing as fixed.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Steve BinkAuthor Commented:
Sorry...getting confused with my linking.

Here's the PR:  https://github.com/chromepenguin/jquery-mobile/commit/d62e1a85e7a94b19913c0af1df3abadb1b06c5f2

Here's the file at the point in history: https://github.com/chromepenguin/jquery-mobile/blob/d62e1a85e7a94b19913c0af1df3abadb1b06c5f2/js/widgets/popup.js

In my copy of jquery.mobile-1.4.5.js (downloaded from the normal CDN link), popup.js corresponds to ~line 10281.  Starting at line 10307, where the options are initialized, you can see that "direction" is not a listed option.  Also, in the _create method (~line 10354), the _isReversed flag is missing.  It looks like this fix was reverted at some point...  the logic described for this fix (i.e., applying the reverse class on "in" or "out" but not both) does not appear in the code that I can see.
Bob LearnedCommented:
Well, my friend, that sounds like a problem outside of my control.  Great discovery, and now you would need to get that issue resolved.  Looks like a regression problem to me.
Steve BinkAuthor Commented:
That's where i ended up, also..  It does not look like this is implemented properly in jQuery Mobile.  Guess I'll post an issue on their Github and see where it goes.

I'll leave this open for a bit to gather comments/insight.
Steve BinkAuthor Commented:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve BinkAuthor Commented:
Thanks much for the bouncy wall.  

They have not responded to the issue.  Depending on the client's reception of it, I may have to generate a fix for it myself.  If so, it will be available via the issue I posted earlier.
Steve BinkAuthor Commented:
TheLearnedOne agreed with my conclusions, and the actual fix may or may not be pending.  The rest of the story will be at GitHub.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.