[MOBILE] Animation slide/cover

example/navigation.html

@@ -29,7 +29,7 @@
         <article></article>
     </aside>
 
-    <section id="zero" data-transition data-children="one" data-aside="a">
+    <section id="zero" data-transition="slide" data-children="one" data-aside="a">
         <header data-title="Zero">
             <nav class="left">
                 <button data-icon="list" data-view-aside="a"></button>

src/stylesheets/__init.styl

@@ -8,9 +8,9 @@ ASIDE_WIDTH             = 264px
 ASIDE_WIDTH_SMALL       = 64px
 ASIDE_SMALL_ICON        = 48px
 
-DEFAULT_TRANSITION      = easeOutSine
-DEFAULT_TRANSITION      = easeInCubic
-TRANSITION_TIME         = 400ms
+DEFAULT_TRANSITION      = cubic-bezier(0.645, 0.045, 0.355, 1.000)
+TRANSITION_TIME         = 500ms
+
 
 FONT_SIZE_TINY          = 11px
 FONT_SIZE_SMALL         = 0.9em

src/stylesheets/lungo.animation.cover.styl

@@ -1,29 +0,0 @@
-@import "__init.styl"
-
-TRANSLATE_Y = -18%
-TRANSLATE_Z = -150px
-ROTATE_X    = 20deg
-
-[data-transition="cover"]
-  &[data-direction="in"]
-    vendor(animation-name, coverIn)
-  &[data-direction="out"]
-    vendor(animation-name, coverOut)
-  &[data-direction="back-in"]
-    vendor(animation-name, coverInBack)
-  &[data-direction="back-out"]
-    vendor(animation-name, coverOutBack)
-
-
-@keyframes coverIn
-  from { transform: translateY(110%) }
-
-@keyframes coverOut
-  to { transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) }
-
-@keyframes coverInBack
-  from { transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z) translateY(TRANSLATE_Y) }
-
-@keyframes coverOutBack
-  to { transform: translateY(110%) }
-

src/stylesheets/lungo.animation.mobile.styl

@@ -0,0 +1,64 @@
+@import "__init.styl"
+
+body[data-device="phone"] > section
+  transform-origin: 50% 100%
+
+  &[data-transition="slide"]
+    &[data-direction="in"]
+      z-index: 2
+      vendor(animation-name, slideIn)
+    &[data-direction="out"]
+      z-index: 1
+      vendor(animation-name, slideOut)
+    &[data-direction="back-in"]
+      z-index: 1
+      vendor(animation-name, slideBackIn)
+    &[data-direction="back-out"]
+      z-index: 2
+      vendor(animation-name, slideBackOut)
+
+
+  &[data-transition="cover"]
+    &[data-direction="in"]
+      vendor(animation-name, coverIn)
+    &[data-direction="out"]
+      vendor(animation-name, slideOut)
+    &[data-direction="back-in"]
+      vendor(animation-name, slideBackIn)
+    &[data-direction="back-out"]
+      vendor(animation-name, coverOutBack)
+
+
+OPACITY   = 0.25
+DEGREES   = 30deg
+TRANSLATE = 110%
+
+@keyframes slideIn
+  0%    { transform: translateX(TRANSLATE) }
+  100%  { transform: translateX(0) }
+
+@keyframes slideOut
+  0%    { transform: translateZ(0) }
+  100%  {
+    transform: rotateX(DEGREES)
+    opacity: OPACITY
+  }
+
+@keyframes slideBackOut
+  0%    { transform: translateX(0) }
+  100%  { transform: translateX(TRANSLATE) }
+
+@keyframes slideBackIn
+  0%    {
+    transform: rotateX(DEGREES)
+    opacity: OPACITY
+  }
+  100%  { transform: translateZ(0) }
+
+@keyframes coverIn
+  0%    { transform: translateY(TRANSLATE) }
+  100%  { transform: translateY(0) }
+
+@keyframes coverOutBack
+  0%    { transform: translateY(0) }
+  100%  { transform: translateY(TRANSLATE) }