Enhaced transitions

src/Lungo.Constants.js

@@ -25,6 +25,7 @@ Lungo.Constants = {
         ASIDE: 'aside',
         SHOW: 'show',
         HIDE: 'hide',
+        HIDING: 'hiding',
         RIGHT: 'right',
         LEFT: 'left',
         HORIZONTAL: 'horizontal',
@@ -37,7 +38,7 @@ Lungo.Constants = {
     },
 
     TRANSITION: {
-        TIME: 350
+        DURATION: 350
     },
 
     ATTRIBUTE: {

src/Lungo.Fallback.js

@@ -11,9 +11,11 @@ Lungo.Fallback = (function(lng, undefined) {
 
     var fixPositionInAndroid = function() {
         env = lng.Core.environment();
-
-        var position = (env.isMobile && env.os.name === 'Android' && env.os.version < "3") ? "absolute" : "fixed";
-        lng.Element.Cache.sections.style("position", position);
+        if (env.isMobile && env.os.name === 'Android' && env.os.version < "3") {
+            lng.dom(document.body).data("position", "absolute");
+        } else {
+            lng.dom(document.body).data("position", "fixed");
+        }
     };
 
     return {

src/boot/Lungo.Boot.Section.js

@@ -24,45 +24,15 @@ Lungo.Boot.Section = (function(lng, undefined) {
         lng.Fallback.fixPositionInAndroid();
 
         _initFirstSection();
-        _initAllSections();
-        // _initAllAsides();
     };
 
     var _initFirstSection = function() {
-        var first_section = lng.Element.Cache.sections.first();
-        lng.Element.Cache.section = first_section;
-        lng.Element.Cache.article = first_section.children(ELEMENT.ARTICLE).first();
+        var section = lng.Element.Cache.sections.first().addClass(CLASS.SHOW);
+        lng.Element.Cache.section = section;
+        lng.Element.Cache.article = section.children(ELEMENT.ARTICLE + "." + CLASS.ACTIVE);
 
-        var first_section_id = '#' + first_section.attr(ATTRIBUTE.ID);
-        first_section.addClass(CLASS.ACTIVE);
-        lng.Router.History.add(first_section_id);
-    };
-
-    var _initAllSections = function() {
-        //@todo: position fixed
-        //lng.Fallback.positionFixed(lng.Element.Cache.sections);
-
-        for (var i = 0, len = lng.Element.Cache.sections.length; i < len; i++) {
-            _initArticles(i);
-        }
-    };
-
-    var _initAllAsides = function() {
-        var aside = null;
-        for (var i = 0, len = lng.Element.Cache.asides.length; i < len; i++) {
-            aside = lng.dom(lng.Element.Cache.asides[i]);
-            aside.children(ELEMENT.ARTICLE).addClass(CLASS.ACTIVE);
-        }
-    };
-
-    var _initArticles = function(section_index) {
-        var section = lng.dom(lng.Element.Cache.sections[section_index]);
-
-        var first_article = section.children(ELEMENT.ARTICLE).first();
-        first_article.addClass(CLASS.ACTIVE);
-
-        var first_article_id = first_article.attr(ATTRIBUTE.ID);
-        if (first_article_id) lng.View.Article.switchReferenceItems(first_article_id, section);
+        var section_id = '#' + section.attr(ATTRIBUTE.ID);
+        lng.Router.History.add(section_id);
     };
 
     var _cacheDOMElements = function() {

src/router/Lungo.Router.js

@@ -104,7 +104,12 @@ Lungo.Router = (function(lng, undefined) {
      */
     var back = function() {
         var current = lng.Element.Cache.section;
-        current.removeClass(CLASS.SHOW);
+        current.removeClass(CLASS.SHOW).addClass(CLASS.HIDING);
+
+        // #TODO: Refactor
+        setTimeout(function() {
+            current.removeClass(CLASS.HIDING);
+        }, lng.Constants.TRANSITION.DURATION);
 
         lng.Router.History.removeLast();
         target = current.siblings(ELEMENT.SECTION + lng.Router.History.current());

src/stylesheets/Lungo.layout.article.styl

@@ -16,11 +16,11 @@ article
   bottom: 0
   width: inherit
   height: auto
-  display: none
   visibility: hidden
+  display: none
   z-index: 0
 
-  &.active
+  .show > &.active, .hide > &.active, .hiding > &.active
     visibility: visible
     display: block
     z-index: 1

src/stylesheets/Lungo.layout.styl

@@ -10,8 +10,19 @@
 @import "import/constants.styl"
 @import "import/vendor.styl"
 
+body
+  &[data-position="absolute"] > section
+    position: absolute
+
+  &[data-position="fixed"] > section
+    position: fixed
+    &[data-transition]
+      transition-property( opacity, z-index, transform )
+      transition-duration( TRANSITION_TIME )
+      transition-timing-function( DEFAULT_TRANSITION )
+      backface-visibility( hidden )
+
 section
-  position: absolute
   top:  0
   left:  0
   width: 100%
@@ -19,13 +30,9 @@ section
   z-index: -1
   display: none
 
-  transition-property( opacity, z-index, transform )
-  transition-duration( TRANSITION_TIME )
-  transition-timing-function( DEFAULT_TRANSITION )
-  transform( translateZ(0) )
-  backface-visibility( hidden )
 
-  &:first-child, &.show
+
+  &.show
     z-index: 1
     display: block
 
@@ -40,7 +47,7 @@ section
   &[data-transition="pop"]
     opacity: 0
     transform( scale(1.15) )
-    &:first-child, &.show
+    &.show
       transform( scale(1) )
       opacity: 1
     &.hide
@@ -51,7 +58,7 @@ section
   &[data-transition="slide"]
     transform( translateX(100%) )
     visibility: visible !important
-    &:first-child, &.show
+    &.show
       transform( translateX(0%) )
     &.hide
       transform( translateX(-100%) )
@@ -59,7 +66,7 @@ section
   /* Transition: COVER */
   &[data-transition="cover"]
     transform( translateY(110%) )
-    &:first-child, &.show, &.hide
+    &.show, &.hide
       transform( translateY(0%) )
 
   /* Transition: FADE */