Game Development Reference
In-Depth Information
top: 0
left: 0
width: 100%
height: 100%
+box-sizing(border-box)
#pages > section
z-index: -1
opacity: 0
+translate3d(-100%, 0, 0)
+transition-property((transform, opacity))
+transition-duration((1s, 0s))
+transition-delay((0s, 2s))
&.current
z-index: 0
opacity: 1
+translate3d(0%, 0, 0)
+transition-delay((0s, 0s))
&.current ~ section
z-index: -1
opacity: 0
+translate3d(100%, 0, 0)
+transition-delay((0s, 2s))
There are a few things to keep in mind about CSS selector operator and Compass mixins:
The
#pages > section
selectors target the
#pages
direct
section
children.
The
section.current ~ section
selectors target all sections that are after any section with a
"
current
" class.
The
+translate3d($x, $y, $z)
Compass mixin is equivalent to:
-webkit-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
A convention we described in the HTML section was to sort section by ascendant priority in order to know
if a page has to transit to the left or to the right.
Because we have these two different possible directions, we have three states for a page, as follows:
The page is the current visible page:
#pages >
section.current
The page is before the current visible page:
#pages > section
The page is after the current visible page :
#pages > section.current ~ section
As you can see, we have split transitions in two kinds: a
transform
transition and an
opacity
transition.
The
transform
transition will translate the page on the X axis. We have chosen to use 3D Transforms
because they are better optimized on WebKit and especially because they are hardware-accelerated on
Safari and iPhone. We could also have used a 2D Transforms for the desktop version. A current page is
placed at the origin (x=0%). Pages before the current pages are stacked precisely to the left of the current
page (x=-100%). Pages after the current pages are symmetrically placed on the right (x=100%).
