Question

EDIT 2/13: The Panels widget in jQuery Mobile 1.3 now exists! Please use this instead.

I’m trying to write a custom CSS-based transition in jQuery Mobile to simulate the slide-out navigation design pattern.

What I’m trying to accomplish is to have the navigation slide into view and take up 75% of the viewport space. The remaining 25% is filled with the remainder of the previous page.

Here’s my CSS:

.slidenav.in { /*New page coming in*/
    -webkit-transform: translateX(-75%);
    -webkit-animation-name: slidenav-in;
}

@-webkit-keyframes slidenav-in {
    from { -webkit-transform: translateX(-75%); }
    to { -webkit-transform: translateX(0); }
}

.slidenav.out { /*Old page going out*/
    -webkit-transform: translateX(0);
    -webkit-animation-name: slidenav-content-out;
}

@-webkit-keyframes slidenav-content-out {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(75%); }
}

.slidenav.in.reverse { /*Old page coming in*/
    -webkit-transform: translateX(75%);
    -webkit-animation-name: slidenav-content-in;
}

@-webkit-keyframes slidenav-content-in {
    from { -webkit-transform: translateX(75%); }
    to { -webkit-transform: translateX(0); }
}

.slidenav.out.reverse { /*New page going out*/
    -webkit-transform: translateX(0);
    -webkit-animation-name: slidenav-out;
}

@-webkit-keyframes slidenav-out {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(-75%); }
}

I can’t seem to get it to do what I want, though. It removes the old page entirely instead of leaving the remaining 25% of the page in view.

You can see what’s happening here (Webkit browsers): http://jsbin.com/ukajeb/7

What am I doing wrong?

Answer 1

EDIT 2/13: The Panels widget in jQuery Mobile 1.3 now exists! Please use this instead.

So I worked some more on this and, with the help of Firebug, discovered that after the keyframe animation was occurring, the original page was being reset to its original position and display set to none.

Knowing this, I started going through the jQuery Mobile docs a bit more thoroughly and found that there are Page Transition Events that you can bind to. More specifically, the pageshow and pagehide events.

Then I set the CSS of the original page manually:

$('[data-role=page]').live('pagehide',function(event, ui){
    $(this).css({
        "display": "block",
        "-webkit-transform": "translateX(75%)"
    });
});
$('[data-role=page]').live('pageshow',function(event, ui){
    $(this).css({
        "display": "",
        "-webkit-transform": ""
    });
});

Check it out here (Webkit browsers): http://jsbin.com/ukajeb/3

Hope someone else finds this useful as well!

Note: This demo uses jQuery Mobile 1.0.1, which only supports jQuery 1.6.4. This is why .live() was used rather than .on(). However, the upcoming jQuery Mobile 1.1.0 will support jQuery 1.7.1, so moving forward .on() should be used in place of the deprecated .live().