Mix section transitions automatically

src/router/Lungo.Router.js

@@ -31,6 +31,13 @@ Lungo.Router = (function(lng, undefined) {
         if (_notCurrentTarget(section_id, current)) {
             var target = lng.Element.sections.siblings(ELEMENT.SECTION + section_id);
             if (target.length > 0) {
+
+                target_transition = target.data('transition');
+                if (target_transition) {
+                    _assignTransitionOrigin(current);
+                    _assignTransition(current, target_transition);
+                }
+
                 current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                 target.addClass(CLASS.SHOW);
                 lng.Element.Current.section = target;
@@ -100,6 +107,8 @@ Lungo.Router = (function(lng, undefined) {
 
         lng.Router.History.removeLast();
         target = lng.Element.sections.siblings(ELEMENT.SECTION + lng.Router.History.current());
+
+        _assignTransition(target, target.data('transition-origin'));
         target.removeClass(CLASS.HIDE).addClass(CLASS.SHOW);
         lng.Element.Current.section = target;
 
@@ -119,6 +128,14 @@ Lungo.Router = (function(lng, undefined) {
         target.trigger(TRIGGER.LOAD);
     };
 
+    var _assignTransition = function(section, transitionName) {
+        section.data('transition', transitionName);
+    };
+
+    var _assignTransitionOrigin = function(section) {
+        section.data('transition-origin', section.data('transition'));
+    };
+
     return {
         section: section,
         article: article,

src/stylesheets/Lungo.layout.less

@@ -73,7 +73,11 @@ section {
 
     &[data-transition="cover"] {
         .transform(translateY(110%));
-        &:first-child, &.show { .transform(translateY(0%)); }
+        // .transition-delay(0ms);
+        &:first-child, &.show, &.hide {
+            .transform(translateY(0%));
+            .transform(translateY(0%));
+        }
     }
 
     &[data-transition="fade"] {

src/stylesheets/css/Lungo.layout.css

@@ -114,7 +114,13 @@ section[data-transition="cover"] {
   transform: translatey(110%);
 }
 section[data-transition="cover"]:first-child,
-section[data-transition="cover"].show {
+section[data-transition="cover"].show,
+section[data-transition="cover"].hide {
+  -webkit-transform: translatey(0%);
+  -moz-transform: translatey(0%);
+  -ms-transform: translatey(0%);
+  -o-transform: translatey(0%);
+  transform: translatey(0%);
   -webkit-transform: translatey(0%);
   -moz-transform: translatey(0%);
   -ms-transform: translatey(0%);