Enable Hardware Acceleration for Page Transitions with CSS3

By Nethru Limited (www.nethru.com)

In this article, I would try to introduce how to enable the hardware acceleration for page transitions with CSS3 and some basic javascript only in your mobile web apps or PhoneGap apps.

Basic Structure

 <div class=”page left”>  <div class=”page center”>  <div class=”page right”>

To slide a page from the right, you would:

  1. Put the new page starting position to the right page.
  2. Put the new page ending position to the center page, with transition-duration style to add animation effect for sliding action.
  3. Put the current page ending position to the left page.
  4. Remove the current page.

Here is the sample code:

var currentPage = document.getElementById("currentPage"),
newPage = document.getElementById("newPage");
// Step 1
newPage.className = "page right";
// Step 2
newPage.className = "page transition center";
// Step 3
currentPage.className = "page transition left";
// Step 4
currentPage.parentNode.removeChild(currentPage);
currentPage = newPage;
newPage = null;

Sliding Effects

Non hardware accelerated transition:

.page {
&#09;position: absolute;
&#09;top: 0;
&#09;left: 0;
&#09;width: 100%;
&#09;height: 100%;
&#09;-webkit-transform: translate3d(0, 0, 0);
&#09;transform: translate3d(0, 0, 0);
}

.page.left {
&#09;left: -100%;
}

.page.center {
&#09;left: 0;
}

.page.right {
&#09;left: 100%;
}

.page.transition {
&#09;-webkit-transition-duration: 0.5s;
&#09;transition-duration: 0.5s;
}

By adding transform: translate3d(0,0,0); to the page can hardware accelerate the drawing of the page, but it will not hardware accelerate the transition effect.

Hardware accelerated transition:

.page {
&#09;position: absolute;
&#09;top: 0;
&#09;left: 0;
&#09;width: 100%;
&#09;height: 100%;
&#09;-webkit-transform: translate3d(0, 0, 0);
&#09;transform: translate3d(0, 0, 0);
}

.page.left {
&#09;-webkit-transform: translate3d(-100%, 0, 0);
&#09;transform: translate3d(-100%, 0, 0);
}

.page.center {
&#09;-webkit-transform: translate3d(0, 0, 0);
&#09;transform: translate3d(0, 0, 0);
}

.page.right {
&#09;-webkit-transform: translate3d(100%, 0, 0);
&#09;transform: translate3d(100%, 0, 0);
}

.page.transition {
&#09;-webkit-transition-duration: 0.5s;
&#09;transition-duration: 0.5s;
}

To enable hardware acceleration to the transition as well, apply 3D transform the page instead of just changing the left property value.

Leave a Reply

Your email address will not be published. Required fields are marked *