Slide in animation when clicking a link with css and/or jquery

I've searched and found almost-answers to my question. Forgive me if this has been answered before, the signal to noise ratio is poor.

On native mobile apps it's common to see a page transition when you click an item in a naviga开发者_运维百科tion list. The new content slides in from the right.

I'd like to do this on a browser app on mobile devices. Clicking a link, probably with a certain style attached to it, causes the new page to slide in. The goal is to give the appearance that the page is loading instantly. Therefore hopefully the new page starts loading immediately but the existing page shows that transition during the load.

I'm not greatly opposed to using Ajax but I thought there were css properties that could allow this. I don't care greatly about the back button's behavior being animated but I do want it to work properly. I'm not using, nor want to use jquery-mobile or another mobile framework.

Any tips? Even knowing the proper search words would be helpful. Thanks!

You should check out the way github does tree browsing. It has the effect you want (and I'm sure you could adapt it for mobile devices) and it also works with the back button. The blog post is here.

You can check out jQuery Mobile. It is aimed at mobile devices and also includes a set of page transitions. You can tak a look at the demo here: Page Transition Doc and Demo

As far as I know page transitions only work in Chrome and maybe also Safari as it is also based on Webkit on the Desktop. Not sure about the mobile devices, sorry.