Horizontal Sliding Transition Scrolling

Question

I am brand new to Android development and have gotten through these two resources successfully:

http://news.softpedia.com/news/How-to-Run-Android-Applications-on-Ubuntu-115152.shtml

http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart

Now I want to make the index.html have a button on it, that, when clicked, does a horizontal right-to-left sliding page transition to a right.html. And when I click a button in right.html, I want to do a left-to-right horizontal sliding page transition right back.

Can anyone demonstrate what I am to do in index.html and right.html to achieve this? Or, do you think it's easier to do this with some framework that goes on top of the Javascript, such as Zepto.js, or jQuery, or Sencha Touch, or jQTouch?

EDIT: I think what I'm hearing is that I need to learn about Webkit Transformations, which provide the sliding effects?

Answer 1

CSS transitions are not meant to transition between two different html files, they are meant to transition between two different css states. You could work around this placing the content in an iframe, or populating a div with an ajax request, but it would be going against the grain.

If you know CSS and a tiny bit of Javascript you can accomplish it with relative ease.

http://jsfiddle.net/ANZpm/

(view in a webkit browser or FF4). I coded this in five minutes, and it's dead simple if you are well versed in CSS.

I would recommend playing around with CSS transitions and then jumping to the framework craze.