Smooth Page Transition on Mobile Devices within Single Html Page

For the smooth page transitions for mobile devices, the basic concept is to make a div element of full width and height, and animate the inner div elements that should act like page.

Now let's discuss the required styling for the sections. The div element acting as page should be position absolute with full page display, and keep in mind to translate them to initial positions using the css3 translate3d property.

The first page will be animated form its original position to either left/right side with translate value of 100%. So we need four classes, one with the animations effects and other three with the translated values.

         /* Transitions Effects Styling */
         .page.left {
               -webkit-transform: translate3d(-100%, 0, 0);
               transform: translate3d(-100%, 0, 0);
         }
         .page.center {
               -webkit-transform: translate3d(0, 0, 0);
               transform: translate3d(0, 0, 0);
         }
         .page.right {
               -webkit-transform: translate3d(100%, 0, 0);
               transform: translate3d(100%, 0, 0);
         }

So now on the javascript code we just need to add these classes to the respective pages while animating, and yes, before going for this, we need to bind a function with the "webkitTransitionEnd"
event that will revert back the changes by removing the classes.

Finally, the navigation. This can be done by keeping track of the hash change and animating the required pages accordingly with loading the page templates onto the main div.  
     
      // Bind the hash change event
      $(window).on('hashchange', Route);


So here basically we need to write a function called "Route", that will manage the hash change event and detect the current hash and load the respective page.

That's all, just load the page and go through the transitions.

For a detailed view of this post please follow this link.