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 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.page.left {
	left: -100%;
}

.page.center {
	left: 0;
}

.page.right {
	left: 100%;
}

.page.transition {
	-webkit-transition-duration: 0.5s;
	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 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.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);
}

.page.transition {
	-webkit-transition-duration: 0.5s;
	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.