First tests with animation keyframes

gpedro · May 28, 2013 · 798e062 · 798e062
1 parent b871006
commit 798e062
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 76 deletions.
diff --git a/GruntFile.coffee b/GruntFile.coffee
@@ -44,7 +44,9 @@ module.exports = (grunt) ->
         'src/stylesheets/lungo.layout.*.styl',
         'src/stylesheets/lungo.widget.styl',
         'src/stylesheets/lungo.widget.*.styl',
-        'src/stylesheets/lungo.media.*.styl']
+        'src/stylesheets/lungo.media.*.styl',
+        'src/stylesheets/lungo.animation.styl',
+        'src/stylesheets/lungo.animation.*.styl']
       theme: [
         'src/stylesheets/theme/theme.*.styl']
       theme_firefoxos: [

diff --git a/example/navigation.html b/example/navigation.html
@@ -19,6 +19,8 @@
 </head>
 
 <body>
+
+    <!--
     <aside id="a">
         <header data-title="aside a"></header>
         <article></article>
@@ -28,31 +30,33 @@
         <header data-title="aside b"></header>
         <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"> -->
+    <section id="zero" data-transition="slide" data-children="one">
         <header data-title="Zero">
-            <nav class="left">
+            <!-- <nav class="left">
                 <button data-icon="list" data-view-aside="a"></button>
-            </nav>
+            </nav> -->
             <nav class="right">
                 <button data-icon="arrow-right" data-view-section="one"></button>
             </nav>
         </header>
         <article id="zero-1"></article>
     </section>
 
-    <section id="one" data-transition="slide" data-children="two" data-aside="b">
+    <!-- <section id="one" data-transition="slide" data-children="two" data-aside="b"> -->
+    <section id="one" data-transition="slide" data-children="two">
         <header data-title="One" data-back="home">
-            <nav class="left">
+            <!-- <nav class="left">
                 <button data-icon="list" data-view-aside="b"></button>
-            </nav>
+            </nav> -->
             <nav class="right">
                 <button data-icon="arrow-right" data-view-section="two"></button>
             </nav>
         </header>
         <article id="one-1"></article>
     </section>
-
     <section id="two" data-transition="slide" data-children="three">
         <header data-back="home" data-title="Two">
             <nav class="right">
@@ -71,11 +75,12 @@
         <article id="three-1"></article>
     </section>
 
+<!--
     <section id="four" data-transition="cover">
         <header data-back="home" data-title="Four"></header>
         <article id="four-1"></article>
     </section>
-
+ -->
     <!-- Lungo dependencies -->
     <script src="components/quojs/quo.js"></script>
     <script src="components/lungo.brownie/lungo.debug.js"></script>

diff --git a/src/modules/Lungo.Router.coffee b/src/modules/Lungo.Router.coffee
@@ -9,9 +9,11 @@ Handles the <sections> and <articles> to show
 ###
 
 Lungo.Router = do(lng = Lungo) ->
-  C        = lng.Constants
-  HASHTAG  = "#"
-  _history = []
+
+  C                   = lng.Constants
+  HASHTAG             = "#"
+  ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"]
+  _history            = []
 
 
   ###
@@ -20,18 +22,24 @@ Lungo.Router = do(lng = Lungo) ->
   @param    {string} Id of the <section>
   ###
   section = (section_id) ->
+    console.error "router section #{section_id}"
     current = lng.Element.Cache.section
     if _notCurrentTarget(current, section_id)
       query = C.ELEMENT.SECTION + HASHTAG + section_id
       target = if current then current.siblings(query) else lng.dom(query)
       if target.length > 0
         if lng.DEVICE is C.DEVICE.PHONE and current?
-          current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST
-          lng.Section.defineTransition target, current
-          current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
+
+          console.error current, target
+          current.addClass "moveToBack"
+          target.addClass "moveFromRight"
+          do _bindEnd
+          # current.siblings("#{C.ELEMENT.SECTION}.#{C.CLASS.LAST}").removeClass C.CLASS.LAST
+          # lng.Section.defineTransition target, current
+          # current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDE).addClass(C.CLASS.LAST)
 
         lng.Section.show current, target
-        lng.Router.step section_id
+        # lng.Router.step section_id
         do _url unless Lungo.Config.history is false
         do _updateNavigationElements
 
@@ -115,6 +123,16 @@ Lungo.Router = do(lng = Lungo) ->
 
   _removeLast = -> _history.length -= 1
 
+  _bindEnd = ->
+    document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
+
+  _unbindEnd = ->
+    document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
+
+  _transitionEnd = ->
+    console.error 'Transition END!'
+    do _unbindEnd
+
 
   section : section
   back    : back

diff --git a/src/stylesheets/lungo.animation.slide.styl b/src/stylesheets/lungo.animation.slide.styl
@@ -0,0 +1,60 @@
+TIME = 0.4s
+
+.moveToLeft
+  vendor(animation, moveToLeft TIME ease both)
+.moveFromLeft
+  vendor(animation, moveFromLeft TIME ease both)
+.moveToRight
+  vendor(animation, moveToRight TIME ease both)
+.moveFromRight
+  vendor(animation, moveFromRight TIME ease both)
+.moveToBack
+  vendor(animation, moveToBack TIME ease both)
+
+@-webkit-keyframes moveToLeft
+  100% { -webkit-transform: translateX(-100%); }
+@-moz-keyframes moveToLeft
+  100% { -moz-transform: translateX(-100%); }
+@keyframes moveToLeft
+  100% { transform: translateX(-100%); }
+
+@-webkit-keyframes moveFromLeft
+  0% { -webkit-transform: translateX(-100%); }
+@-moz-keyframes moveFromLeft
+  0% { -moz-transform: translateX(-100%); }
+@keyframes moveFromLeft
+  0% { transform: translateX(-100%); }
+
+@-webkit-keyframes moveToRight
+  100% { -webkit-transform: translateX(100%); }
+@-moz-keyframes moveToRight
+  100% { -moz-transform: translateX(100%); }
+@keyframes moveToRight
+  100% { transform: translateX(100%); }
+
+@-webkit-keyframes moveFromRight
+  0%   { -webkit-transform: translateX(100%); }
+@-moz-keyframes moveFromRight
+  0%   { -moz-transform: translateX(100%); }
+@keyframes moveFromRight
+  0%   { transform: translateX(100%); }
+
+
+
+@-webkit-keyframes moveToBack
+  100% {
+    -webkit-transform: rotateX(20deg) translateZ(-100px);
+    transform-origin: 100% 50%;
+    opacity: .3;
+  }
+@-moz-keyframes moveToLeft
+  100% {
+    -moz-transform: rotateX(20deg) translateZ(-100px);
+    opacity: .3;
+  }
+@keyframes moveToLeft
+  100% {
+    transform: rotateX(20deg) translateZ(-100px);
+    opacity: .3;
+  }
+
diff --git a/src/stylesheets/lungo.animation.styl b/src/stylesheets/lungo.animation.styl
@@ -0,0 +1,20 @@
+@import "__init.styl"
+
+body
+  vendor(perspective, 800px)
+  vendor(transform-style, preserve-3d)
+
+  & > section
+    display-box()
+    width: 100%
+    height: 100%
+    position: absolute
+    top: 0
+    left: 0
+    visibility: hidden
+    overflow: hidden
+    transform translate3d(0, 0, 0)
+    vendor(backface-visibility, hidden)
+
+    &.show
+      visibility: visible
diff --git a/src/stylesheets/lungo.media.phone.styl b/src/stylesheets/lungo.media.phone.styl
@@ -15,68 +15,68 @@
       &:not([data-transition]).show
         display: block
 
-      &.show.aside
-        &:not(.right)
-          transform translateX(ASIDE_WIDTH)
-        &.right
-          transform translateX(-(ASIDE_WIDTH))
-      &.show.hide
-        z-index: -1
+      // &.show.aside
+      //   &:not(.right)
+      //     transform translateX(ASIDE_WIDTH)
+      //   &.right
+      //     transform translateX(-(ASIDE_WIDTH))
+      // &.show.hide
+      //   z-index: -1
 
-      &[data-transition]
-        display-box()
-        transition-property opacity, z-index, transform,        scale, opacity
-        transition-duration TRANSITION_TIME
-        transition-timing-function DEFAULT_TRANSITION
-        backface-visibility hidden
+      // &[data-transition]
+      //   display-box()
+      //   transition-property opacity, z-index, transform,        scale, opacity
+      //   transition-duration TRANSITION_TIME
+      //   transition-timing-function DEFAULT_TRANSITION
+      //   backface-visibility hidden
 
-      /* Transition: SLIDE */
-      &[data-transition="slide"]
-        visibility: visible
-        z-index: 2
-        &.show, &:first-child
-          transform translateX(0%)
-          z-index: 1
-        &:not(first-child)
-          transform translateX(100%)
-        &.hide
-          transform scale(0.9)
-          z-index: -1
-          &:not(.last)
-            opacity: 0
-            transition none !important
-          &.last
-            opacity: 0.5 !important
+      // // Transition: SLIDE
+      // &[data-transition="slide"]
+      //   visibility: visible
+      //   z-index: 2
+      //   &.show, &:first-child
+      //     transform translateX(0%)
+      //     z-index: 1
+      //   &:not(first-child)
+      //     transform translateX(100%)
+      //   &.hide
+      //     transform scale(0.9)
+      //     z-index: -1
+      //     &:not(.last)
+      //       opacity: 0
+      //       transition none !important
+      //     &.last
+      //       opacity: 0.5 !important
 
-      /* Transition: COVER */
-      &[data-transition="cover"]
-        transform translateY(100%)
-        &.show, &.hide
-          transform translateY(0%)
-        &.hide
-          transform scale(0.9)
-          z-index: -1
-          &:not(.last)
-            opacity: 0
-            visibility: hidden
-          &.last
-            opacity: 0.2
+      // // Transition: COVER
+      // &[data-transition="cover"]
+      //   transform translateY(100%)
+      //   &.show, &.hide
+      //     transform translateY(0%)
+      //   &.hide
+      //     transform scale(0.9)
+      //     z-index: -1
+      //     &:not(.last)
+      //       opacity: 0
+      //       visibility: hidden
+      //     &.last
+      //       opacity: 0.2
 
-      /* Transition: POP */
-      &[data-transition="pop"]
-        opacity: 0
-        transform scale(1.15)
-        &.show
-          transform scale(1)
-          opacity: 1
-        &.hide
-          transform scale(0.9)
-          opacity: 0
+      // // Transition: POP
+      // &[data-transition="pop"]
+      //   opacity: 0
+      //   transform scale(1.15)
+      //   &.show
+      //     transform scale(1)
+      //     opacity: 1
+      //   &.hide
+      //     transform scale(0.9)
+      //     opacity: 0
 
-      /* Transition: FADE */
-      &[data-transition="fade"]
-        opacity: 0
-        &:first-child, &.show
-          opacity: 1
-        &:hide
-          opacity: 0
+      // // Transition: FADE
+      // &[data-transition="fade"]
+      //   opacity: 0
+      //   &:first-child, &.show
+      //     opacity: 1
+      //   &:hide
+      //     opacity: 0