HTML and CSS Reference
In-Depth Information
Although
translate3d(0,0,0)
is known as the silver bullet approach for WebKit, other
browser engines like fennec (Mobile Firefox) and Opera Mobile do not support, or are
just implementing,
translate3d
as of this writing. They do support 2D transformations,
which cut out the Z-axis, so to support these browsers, you need to change:
transale3d
(
X
,
Y
,
Z
);
//
or
translateX
(
X
),
translateY
(
Y
),
translateZ
(
Z
);
to:
translate
(
X
,
Y
);
The one downside to 2D transforms is that, unlike 3D transforms, they are not GPU
accelerated.
Hardware acceleration tricks do not provide any speed improvement
under Android Froyo 2.2 and beyond. All composition is done within
the software.
When the user clicks a navigation element, we execute the
following JavaScript
to swap
the classes. We're not using any third-party frameworks yet, this is straight up JavaScript!
function
slideTo
(
id
)
{
//1.) the page we are bringing into focus dictates how
// the current page will exit. So let's see what classes
// our incoming page is using.
//We know it will have stage[right|left|etc...]
var
classes
=
getElement
(
id
).
className
.
split
(
' '
);
//2.) decide if the incoming page is assigned to right or left
// (-1 if no match)
var
stageType
=
classes
.
indexOf
(
'stage-left'
);
//3.) on initial page load focusPage is null, so we need
// to set the default page which we're currently seeing.
if
(
FOCUS_PAGE
==
null
)
{
// use home page
FOCUS_PAGE
=
getElement
(
'home-page'
);
}
//4.) decide how this focused page should exit.
if
(
stageType
>
0
)
{
FOCUS_PAGE
.
className
=
'page transition stage-right'
;
}
else
{
FOCUS_PAGE
.
className
=
'page transition stage-left'
;
}
//5. refresh/set the global variable
FOCUS_PAGE
=
getElement
(
id
);
