Firsts test with new animations

For test in different devices

src/modules/Lungo.Router.coffee

@@ -8,13 +8,15 @@ Handles the <sections> and <articles> to show
 @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
 ###
 
-Lungo.Router = do(lng = Lungo) ->
+Lungo.Router = do (lng = Lungo) ->
 
   C                   = lng.Constants
   HASHTAG             = "#"
   ANIMATIONEND_EVENTS = ["animationend", "webkitAnimationEnd", "oanimationend", "MSAnimationEnd"]
   _history            = []
-
+  _outPage            = undefined
+  _inPage             = undefined
+  _animating          = false
 
   ###
   Navigate to a <section>.
@@ -22,24 +24,20 @@ 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)
+    _outPage = lng.Element.Cache.section
+    if _notCurrentTarget(_outPage, 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?
-
-          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
+      _inPage = if _outPage then _outPage.siblings(query) else lng.dom(query)
+      if _inPage.length > 0
+        if lng.DEVICE is C.DEVICE.PHONE and _outPage?
+          outClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "Out"
+          inClass = _inPage.data(C.ATTRIBUTE.TRANSITION) + "In"
+          _outPage.addClass(outClass).addClass("show")
+          _inPage.addClass(inClass).addClass("show")
+          do _bindAnimationEnd
+
+        lng.Section.show _outPage, _inPage
+        lng.Router.step section_id
         do _url unless Lungo.Config.history is false
         do _updateNavigationElements
 
@@ -49,20 +47,20 @@ Lungo.Router = do(lng = Lungo) ->
   @method   back
   ###
   back = ->
-    _removeLast()
-    current = lng.Element.Cache.section
+    do _removeLast
+    _outPage = lng.Element.Cache.section
     query = C.ELEMENT.SECTION + HASHTAG + history()
-    target = current.siblings(query)
+    _inPage = _outPage.siblings(query)
     if lng.DEVICE is C.DEVICE.PHONE
-      lng.Aside.hide()
-      lng.Section.assignTransition target, target.data C.TRANSITION.ORIGIN
-      current.removeClass(C.CLASS.SHOW).addClass(C.CLASS.HIDING)
-      setTimeout (->
-        current.removeClass(C.CLASS.HIDING)
-      ), C.TRANSITION.DURATION
-      if target.hasClass("aside") then lng.Aside.toggle()
-
-    lng.Section.show current, target
+      do lng.Aside.hide
+      outClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "OutBack"
+      inClass = _outPage.data(C.ATTRIBUTE.TRANSITION) + "InBack"
+      _outPage.addClass(outClass).addClass("show")
+      _inPage.addClass(inClass).addClass("show")
+      do _bindAnimationEnd
+      if _inPage.hasClass("aside") then lng.Aside.toggle()
+
+    lng.Section.show _outPage, _inPage
     do _url unless Lungo.Config.history is false
     do _updateNavigationElements
 
@@ -123,15 +121,20 @@ Lungo.Router = do(lng = Lungo) ->
 
   _removeLast = -> _history.length -= 1
 
-  _bindEnd = ->
+  _bindAnimationEnd = ->
     document.addEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
+    _animating = true
 
-  _unbindEnd = ->
+  _unbindAnimationEnd = ->
     document.removeEventListener(ev, _transitionEnd) for ev in ANIMATIONEND_EVENTS
 
   _transitionEnd = ->
-    console.error 'Transition END!'
-    do _unbindEnd
+    _outPage.attr "class", ""
+    _inPage.attr "class", "show"
+    _outPage = undefined
+    _inPage = undefined
+    do _unbindAnimationEnd
+    _animating = false
 
 
   section : section

src/stylesheets/__init.styl

@@ -9,7 +9,7 @@ ASIDE_SMALL_ICON       = 48px
 
 DEFAULT_TRANSITION     = easeOutSine
 DEFAULT_TRANSITION     = easeInCubic
-TRANSITION_TIME        = 400ms
+TRANSITION_TIME        = 1000ms
 
 FONT_SIZE_TINY         = 11px
 FONT_SIZE_SMALL        = 0.9em

src/stylesheets/lungo.animation.back.styl

@@ -0,0 +1,24 @@
+@import "__init.styl"
+
+OPACITY     = 0.3
+TRANSLATE_Z = -300px
+ROTATE_X    = 20deg
+ORIGIN      = 100% 50%
+
+.backIn
+  vendor(animation, backIn TRANSITION_TIME ease both)
+.backOut
+  vendor(animation, backOut TRANSITION_TIME ease both)
+
+
+@keyframes backIn
+  from {
+    transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z)
+    transform-origin: ORIGIN
+  }
+
+@keyframes backOut
+  to {
+    transform: rotateX(ROTATE_X) translateZ(TRANSLATE_Z)
+    transform-origin: ORIGIN
+  }

src/stylesheets/lungo.animation.cover.styl

@@ -0,0 +1,36 @@
+@import "__init.styl"
+
+TRANSLATE_Y = -18%
+TRANSLATE_Z = -150px
+ROTATE_X    = 20deg
+
+.coverIn
+  vendor(animation, coverIn TRANSITION_TIME ease both)
+.coverOut
+  vendor(animation, coverOut TRANSITION_TIME ease both)
+.coverInBack
+  vendor(animation, coverInBack TRANSITION_TIME ease both)
+.coverOutBack
+  vendor(animation, coverOutBack TRANSITION_TIME ease both)
+
+
+@keyframes coverIn
+  from {
+    transform: translateY(100%);
+  }
+
+@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(100%)
+  }
+

src/stylesheets/lungo.animation.slide.styl

@@ -1,60 +1,23 @@
-TIME = 0.4s
+@import "__init.styl"
 
-.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%); }
+.slideIn
+  vendor(animation, slideIn TRANSITION_TIME ease both)
+.slideOut
+  vendor(animation, backOut TRANSITION_TIME ease both)
+.slideInBack
+  vendor(animation, backIn TRANSITION_TIME ease both)
+.slideOutBack
+  vendor(animation, slideOutBack TRANSITION_TIME ease both)
 
-@-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 slideIn
+  from {
+    transform: translateX(100%)
   }
-@keyframes moveToLeft
-  100% {
-    transform: rotateX(20deg) translateZ(-100px);
-    opacity: .3;
+
+@keyframes slideOutBack
+  to {
+    transform: translateX(100%)
   }