HTML and CSS Reference
In-Depth Information
function
positionPage
(
end
)
{
page
.
style
.
webkitTransform
=
'translate3d('
+
currentPos
+
'px, 0, 0)'
;
if
(
end
)
{
page
.
style
.
WebkitTransition
=
'all .4s ease-out'
;
//page.style.WebkitTransition = 'all .4s cubic-bezier(0,.58,.58,1)'
}
else
{
page
.
style
.
WebkitTransition
=
'all .2s ease-out'
;
}
For this example,
ease-out
did the trick, but for your own projects, play around with
cubic-bezier
to give the best native feel to your transitions.
Finally, to make the navigation happen, we must call the previously defined
slide
To()
methods used in the last example.
track
.
ontouchend
=
function
(
event
)
{
pageMove
(
event
);
if
(
slideDirection
==
'left'
)
{
slideTo
(
'products-page'
);
}
else
if
(
slideDirection
==
'right'
)
{
slideTo
(
'home-page'
);
}
}
Rotating
Next, take a look at the rotate animation being used in this demo. At any time, you can
rotate the page you're currently viewing 180 degrees to reveal the reverse side by tapping
on the Contact menu option. Again, this only takes a few lines of CSS and some Java‐
Script to assign a transition class
onclick
.
The rotate transition isn't rendered correctly on most versions of An‐
droid, because it lacks 3D CSS transform capabilities. Unfortunately,
instead of ignoring the flip, Android makes the page “cartwheel” away
by rotating instead of flipping. I recommend using this transition spar‐
ingly until support improves.
Here's the
full source
, but here's the markup (basic concept of front and back):
<div
id=
"front"
class=
"normal"
>
...
</div>
<div
id=
"back"
class=
"flipped"
>
<div
id=
"contact-page"
class=
"page"
>
<h1>
Contact Page
</h1>
</div>
</div>
