HTML and CSS Reference
In-Depth Information
//6. Bring in the new page.
FOCUS_PAGE
.
className
=
'page transition stage-center'
;
}
stage-left
or
stage-right
becomes
stage-center
and forces the page to slide into
the center view port. We are completely depending on CSS3 to do the heavy lifting.
.stage-left
{
left
:
100
%
;
}
.stage-right
{
left
:
100
%
;
}
.stage-center
{
top
:
0
;
left
:
0
;
}
By controlling the animations through swapping the
stage
classes in JavaScript, we are
decoupling the CSS implementations from JavaScript. We could, however, control all
the presentation logic within JavaScript by using:
FOCUS_PAGE
.
style
.
transform
=
"translate(X,Y)"
;
Each browser vendor may be using a specific
vendor prefix
for the transform capabilities.
One quick way of checking to see what your target browser supports is to use:
var
getTransformProperty
=
function
(
node
)
{
var
properties
=
[
'transform'
,
'WebkitTransform'
,
'msTransform'
,
'MozTransform'
,
'OTransform'
];
var
p
;
while
(
p
=
properties
.
shift
())
{
if
(
typeof
node
.
style
[
p
]
!=
'undefined'
)
{
document
.
querySelector
(
"#log"
).
innerHTML
+=
p
+
"<br/>"
;
}
}
return
false
;
};
This slide effect has been tested on Mobile Safari, Android, Mobile Firefox (
Figure 3-2
),
and Opera Mobile (
Figure 3-3
).You can also see the
source code
that supports all the
aforementioned browsers.
