asked on

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?

Bob Learned

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 Bink

ASKER

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 Learned

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.

Steve Bink

ASKER

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.

SOLUTION

Bob Learned

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Bink

ASKER

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.

ASKER CERTIFIED SOLUTION

Steve Bink

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Steve Bink

ASKER

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 Bink

ASKER

TheLearnedOne agreed with my conclusions, and the actual fix may or may not be pending. The rest of the story will be at GitHub.