Refactor phone animation

example/navigation.html

@@ -62,7 +62,7 @@
         <article id="two-1"></article>
     </section>
 
-    <section id="three" data-transition="slide" data-children="four">
+    <section id="three" data-transition="cover" data-children="four">
         <header data-back="chevron-left" data-title="Three">
             <nav class="on-right">
                 <button data-icon="arrow-down" data-view-section="four"></button>

src/stylesheets/lungo.animation.fade.styl

@@ -1,30 +0,0 @@
-@import "__init.styl"
-
-.fadeIn
-  vendor(animation-name, fadeIn)
-  vendor(animation-duration, TRANSITION_TIME)
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
-.fadeOut
-  vendor(animation-name, fadeOut)
-  vendor(animation-duration, TRANSITION_TIME)
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
-.fadeInBack
-  vendor(animation-name, fadeInBack)
-  vendor(animation-duration, TRANSITION_TIME)
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
-.fadeOutBack
-  vendor(animation-name, fadeOutBack)
-  vendor(animation-duration, TRANSITION_TIME)
-  vendor(animation-timing-function, DEFAULT_TRANSITION)
-
-@keyframes fadeIn
-  from { opacity: 0 }
-
-@keyframes fadeOut
-  to { opacity: 1 }
-
-@keyframes fadeInBack
-  from { opacity: 0 }
-
-@keyframes fadeOutBack
-  to { opacity: 0 }

src/stylesheets/lungo.animation.mobile.styl

@@ -1,64 +0,0 @@
-@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) }

src/stylesheets/lungo.animation.phone.styl

@@ -0,0 +1,104 @@
+body[data-device="phone"] > section
+
+  &[data-transition="slide"]
+    transform-origin: 100% 100%
+    &[data-direction="in"]
+      z-index: 2
+      vendor(animation-name, phoneSlideIn)
+    &[data-direction="out"]
+      z-index: 1
+      vendor(animation-name, phoneSlideOut)
+    &[data-direction="back-in"]
+      z-index: 1
+      vendor(animation-name, phoneSlideBackIn)
+    &[data-direction="back-out"]
+      z-index: 2
+      vendor(animation-name, phoneSlideBackOut)
+
+  &[data-transition="cover"]
+    transform-origin: 50% 100%
+    &[data-direction="in"]
+      z-index: 2
+      vendor(animation-name, phoneCoverIn)
+    &[data-direction="out"]
+      z-index: 1
+      vendor(animation-name, phoneCoverOut)
+    &[data-direction="back-in"]
+      z-index: 1
+      vendor(animation-name, phoneCoverBackIn)
+    &[data-direction="back-out"]
+      z-index: 2
+      vendor(animation-name, phoneCoverOutBack)
+
+  &[data-transition="fade"]
+    &[data-direction="in"]
+      vendor(animation-name, phoneFadeIn)
+    &[data-direction="out"]
+      vendor(animation-name, phoneFadeOut)
+    &[data-direction="back-in"]
+      vendor(animation-name, phoneFadeIn)
+    &[data-direction="back-out"]
+      vendor(animation-name, phoneFadeOut)
+
+OPACITY   = 0.25
+TRANSLATE = 110%
+
+/* ------ SLIDE ------ */
+DEGREES   = -45deg
+@keyframes phoneSlideOut
+  0%    { transform: translateZ(0) }
+  100%  {
+    transform: rotateY(DEGREES)
+    opacity: OPACITY
+  }
+
+@keyframes phoneSlideIn
+  0%    { transform: translateX(TRANSLATE) }
+  100%  { transform: translateX(0) }
+
+
+@keyframes phoneSlideBackOut
+  0%    { transform: translateX(0) }
+  100%  { transform: translateX(TRANSLATE) }
+
+@keyframes phoneSlideBackIn
+  0%    {
+    transform: rotateY(DEGREES)
+    opacity: OPACITY
+  }
+  100%  { transform: translateZ(0) }
+
+
+/* ------ COVER ------ */
+DEGREES   = 25deg
+@keyframes phoneCoverOut
+  0%    { transform: translateZ(0) }
+  100%  {
+    transform: rotateX(DEGREES)
+    opacity: OPACITY
+  }
+
+@keyframes phoneCoverIn
+  0%    { transform: translateY(TRANSLATE) }
+  100%  { transform: translateY(0) }
+
+@keyframes phoneCoverOutBack
+  0%    { transform: translateY(0) }
+  100%  { transform: translateY(TRANSLATE) }
+
+@keyframes phoneCoverBackIn
+  0%    {
+    transform: rotateX(DEGREES)
+    opacity: OPACITY
+  }
+  100%  { transform: translateZ(0) }
+
+
+/* ------ FADE ------ */
+@keyframes phoneFadeOut
+  0%    { opacity: 1 }
+  100%  { opacity: 0 }
+
+@keyframes phoneFadeIn
+  0%    { opacity: 0 }
+  100%  { opacity: 1 }

src/stylesheets/lungo.animation.slide.styl

@@ -1,34 +1,3 @@
-@import "__init.styl"
-
-body[data-device="phone"]
-  & > section[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)
-
-SCALE = .8
-@keyframes slideIn
-  from { transform: translateX(100%) }
-  to   { transform: translateX(0) }
-@keyframes slideOut
-  from { transform: scale(1) }
-  to   { transform: scale(SCALE) }
-@keyframes slideBackOut
-  from { transform: translateX(0) }
-  to   { transform: translateX(100%) }
-@keyframes slideBackIn
-  from { transform: scale(SCALE) }
-  to   { transform: scale(1) }
-
 
 //============================================================
 // Tablet