HTML and CSS Reference
In-Depth Information
When dealing with touch events and transitions, the first thing you'll want is to get a
handle on the current position of the element. Thanks to the CSSMatrix interface, which
is implemented by WebKit only at the time of this writing, you can get an instance of
WebKitCSSMatrix
by passing the current transform's computed style.
function
pageMove
(
event
)
{
// get position after transform
var
curTransform
=
new
WebKitCSSMatrix
(
window
.
getComputedStyle
(
page
).
webkitTransform
);
var
pagePosition
=
curTransform
.
m41
;
}
Because we are using a CSS3 ease-out transition for the page flip, the usual
element.off
setLeft
will not work.
Next we want to figure out which direction the user is flipping and set a threshold for
an event (page navigation) to take place.
if
(
pagePosition
>=
0
)
{
//moving current page to the right
//so means we're flipping backwards
if
((
pagePosition
>
pageFlipThreshold
)
||
(
swipeTime
<
swipeThreshold
))
{
//user wants to go backward
slideDirection
=
'right'
;
}
else
{
slideDirection
=
null
;
}
}
else
{
//current page is sliding to the left
if
((
swipeTime
<
swipeThreshold
)
||
(
pagePosition
<
pageFlipThreshold
))
{
//user wants to go forward
slideDirection
=
'left'
;
}
else
{
slideDirection
=
null
;
}
}
You'll also notice that we are measuring the
swipeTime
in milliseconds as well. This
allows the navigation event to fire if the user quickly swipes the screen to turn a page.
To position the page and make the animations look native while a finger is touching the
screen, we use CSS3 transitions after each event firing.
