HTML5 Zone is brought to you in partnership with:

I'm a Worldwide Developer Evangelist for Adobe. My job basically entails me traveling the world and talking about the developer tools and technologies that Adobe has to offer or that we support. I'm also the author of Driving Technical Change. It's about convinving reluctant co-workers to adopt new tools and techniques. Terrence is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. You can read more from them at their website. View Full User Profile

HTML Page Slide Without a Framework

04.09.2012
| 23143 views |
  • submit to reddit

I'm working on a little demo mobile application for an upcoming project, and I wanted to add sliding transitions between pages. Pretty simple, right? You just use jQuery, jQuery Mobile, zepto, or one of a bunch of other frameworks, and they handle this for you. I didn't want to.  Part of my goal with this particular project is to challenge myself to work without a framework so that I can see how this stuff works by hand.  Also I wanted to keep the HTML as slim and uncrufted as possible

Googling found very little to go on - except a micro solution for page transitions by FASW. I like it, but it's still using someone else's work, and I didn't like adding even the little bit of HTML cruft that it needed.

So I rolled my own.

The solution I came up with actually is pretty lightweight and is powered by a little AJAX, some CSS transitions, and CSS transition events. It's also important to note that this only works with WebKit. (My personal use case is for a mobile application with PhoneGap targeting Android and iOS, so I only need WebKit compatibility.)

First thing is to set the CSS of the body to have a transition on it, so when I move it around it's animated.

body{
   position: relative;
   -webkit-transition: left .2s ease;
}

Next thing I do is fire off a function when the page loads to replace all links with a function that will create the effect.  I use some techniques I learned from a great article named From jQuery to JavaScript: A Reference to handle these operations without jQuery.

document.addEventListener('DOMContentLoaded', function() {
  replaceLinks();
});

function replaceLinks(){
   var links = document.querySelectorAll('a');

   for (i=0; i<links.length; i++){
      var link = links[i];
      link.addEventListener("click",replacePage, false);
   }

}

Next step is to use AJAX to get the linked page.

event.preventDefault();
var href= this.href;

var ajax = new XMLHttpRequest();
ajax.open("GET",href,true);
ajax.send();

Now comes the transitions.  What I need to do to accomplish this page slide is:

  1. Slide the page off the screen to the left.
  2. Instantaneously move the page to the right side off screen
  3. Replace the contents of the body with the new content
  4. Slide the page on to the screen from the right.

I have to do it in that order.  If you replace the contents independent of the animation, you get weird effects like the page changing then the animation happening, which looks jarring. Or you get the opposite, the transition happening, then the contents changing.  Looks ugly.  Trying to time these proved problematic. The best thing to do would be to wait for the transition offscreen to happen, then change the content, then move it back on screen. I was able to do this by using a transition event.

Basically as far as I can tell there is only one transition event "transitionEnd" regardless of browser manufacturer.  I haven't been able to figure that out. Animation events appear similarly limited.  So here's how I did it:

I moved the body to the left side of the screen.

body.style.left = "-100%";

There is an event listener that handles making it transparent while I move it to the other side of the screen.

body.addEventListener( 'webkitTransitionEnd', moveToRight, false);

function moveToRight(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', moveToRight, false);
   body.addEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.style.opacity = 0;
   body.style.left = "100%"
}

I then replace the content, make it visible again, adjust the browser history, and move it back to the center.

function returnToCenter(event){
   var body = document.querySelector('body');
   body.removeEventListener( 'webkitTransitionEnd', returnToCenter, false);
   body.innerHTML = bodyContent;
   history.pushState(null, null, href);
   body.style.opacity = 1;
   body.style.left = 0;
   replaceLinks();
}

Then to be thorough, I make sure that I reverse the process if the user hits the back button.

window.addEventListener("popstate", handleBackButton);

function handleBackButton(e) {

   var ajaxBack = new XMLHttpRequest();
   ajaxBack.open("GET",location.pathname,true);
   ajaxBack.send();

   ajaxBack.onreadystatechange=function(){
      var bodyBack = document.querySelector('body');
      var bodyBackContent = grabBody(ajaxBack.responseText, "body");
      bodyBack.addEventListener( 'webkitTransitionEnd', moveToLeft, false);
      bodyBack.style.left = "100%";

      function backToCenter(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.innerHTML = bodyBackContent;
         body.style.opacity = 1;
         body.style.left = 0;
         replaceLinks();
      }

      function moveToLeft(event){
         var body = document.querySelector('body');
         body.removeEventListener( 'webkitTransitionEnd', moveToLeft, false);
         body.addEventListener( 'webkitTransitionEnd', backToCenter, false);
         body.style.opacity = 0;
         body.style.left = "-100%"
      }
   }
}

Is this the best way to do this?  I have no idea.  But it works for me and I couldn't find a comparable solution via Google.

There is a demo here.(WebKit browsers only)

Full source code is available via github.

Published at DZone with permission of Terrence Ryan, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)