New transitions: fade & cover

src/stylesheets/Lungo.layout.less

@@ -20,20 +20,17 @@ section {
     height: 100%;
     z-index: -1;
     display: none;
-    visibility: hidden;
-    .transition(all 250ms @defaultTrasition);
-    -webkit-backface-visibility: hidden;
+    .transition(all 400ms @defaultTrasition);
+    .backface-visibility(hidden);
 
     &:first-child, &.show {
         z-index: 1;
         display: block;
-        visibility: visible;
     }
 
     &.hide {
         z-index: -1;
         display: none;
-        visibility: hidden;
     }
 
     &[data-transition] {
@@ -56,14 +53,39 @@ section {
     }
 
     &[data-transition="slide"] {
-        .transform(translate(100%, 0));
+        .transform(translateX(100%));
         visibility: visible !important;
 
-        &:first-child, &.show { .transform(translate(0%, 0)); }
-        &.hide { .transform(translate(-100%, 0)); }
+        &:not(.show) > header > * {
+            opacity: 0;
+            .transition(opacity 300ms @defaultTrasition);
+        }
+
+        &:first-child, &.show {
+            .transform(translateX(0%));
+            & > header > * { opacity: 1; }
+        }
+
+        &.hide {
+            .transform(translateX(-100%));
+
+            & > header > * { opacity: 0; }
+        }
+    }
+
+    &[data-transition="cover"] {
+        .transform(translateY(110%));
+        &:first-child, &.show { .transform(translateY(0%)); }
+    }
+
+    &[data-transition="fade"] {
+        opacity: 0;
+        &:first-child, &.show { opacity: 1; }
+        &:hide {opacity: 0;}
     }
 }
 
+
 header, footer  {
     position: absolute;
     left: 0;

src/stylesheets/css/Lungo.layout.css

@@ -16,29 +16,35 @@ section {
   height: 100%;
   z-index: -1;
   display: none;
-  visibility: hidden;
-  -webkit-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -webkit-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 250ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: all 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
   -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 section:first-child,
 section.show {
   z-index: 1;
   display: block;
-  visibility: visible;
 }
 section.hide {
   z-index: -1;
   display: none;
-  visibility: hidden;
 }
 section[data-transition] {
   display: block !important;
@@ -84,42 +90,97 @@ section[data-transition="pop"].hide {
   opacity: 0;
 }
 section[data-transition="slide"] {
-  -webkit-transform: translate(100%, 0);
-  -moz-transform: translate(100%, 0);
-  -ms-transform: translate(100%, 0);
-  -o-transform: translate(100%, 0);
-  transform: translate(100%, 0);
-  -webkit-transform: translate(100%, 0);
-  -moz-transform: translate(100%, 0);
-  -ms-transform: translate(100%, 0);
-  -o-transform: translate(100%, 0);
-  transform: translate(100%, 0);
+  -webkit-transform: translatex(100%);
+  -moz-transform: translatex(100%);
+  -ms-transform: translatex(100%);
+  -o-transform: translatex(100%);
+  transform: translatex(100%);
+  -webkit-transform: translatex(100%);
+  -moz-transform: translatex(100%);
+  -ms-transform: translatex(100%);
+  -o-transform: translatex(100%);
+  transform: translatex(100%);
   visibility: visible !important;
 }
+section[data-transition="slide"]:not(.show) > header > * {
+  opacity: 0;
+  -webkit-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition: opacity 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+}
 section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
-  -webkit-transform: translate(0%, 0);
-  -moz-transform: translate(0%, 0);
-  -ms-transform: translate(0%, 0);
-  -o-transform: translate(0%, 0);
-  transform: translate(0%, 0);
-  -webkit-transform: translate(0%, 0);
-  -moz-transform: translate(0%, 0);
-  -ms-transform: translate(0%, 0);
-  -o-transform: translate(0%, 0);
-  transform: translate(0%, 0);
+  -webkit-transform: translatex(0%);
+  -moz-transform: translatex(0%);
+  -ms-transform: translatex(0%);
+  -o-transform: translatex(0%);
+  transform: translatex(0%);
+  -webkit-transform: translatex(0%);
+  -moz-transform: translatex(0%);
+  -ms-transform: translatex(0%);
+  -o-transform: translatex(0%);
+  transform: translatex(0%);
+}
+section[data-transition="slide"]:first-child  > header > *,
+section[data-transition="slide"].show  > header > * {
+  opacity: 1;
 }
 section[data-transition="slide"].hide {
-  -webkit-transform: translate(-100%, 0);
-  -moz-transform: translate(-100%, 0);
-  -ms-transform: translate(-100%, 0);
-  -o-transform: translate(-100%, 0);
-  transform: translate(-100%, 0);
-  -webkit-transform: translate(-100%, 0);
-  -moz-transform: translate(-100%, 0);
-  -ms-transform: translate(-100%, 0);
-  -o-transform: translate(-100%, 0);
-  transform: translate(-100%, 0);
+  -webkit-transform: translatex(-100%);
+  -moz-transform: translatex(-100%);
+  -ms-transform: translatex(-100%);
+  -o-transform: translatex(-100%);
+  transform: translatex(-100%);
+  -webkit-transform: translatex(-100%);
+  -moz-transform: translatex(-100%);
+  -ms-transform: translatex(-100%);
+  -o-transform: translatex(-100%);
+  transform: translatex(-100%);
+}
+section[data-transition="slide"].hide  > header > * {
+  opacity: 0;
+}
+section[data-transition="cover"] {
+  -webkit-transform: translatey(110%);
+  -moz-transform: translatey(110%);
+  -ms-transform: translatey(110%);
+  -o-transform: translatey(110%);
+  transform: translatey(110%);
+  -webkit-transform: translatey(110%);
+  -moz-transform: translatey(110%);
+  -ms-transform: translatey(110%);
+  -o-transform: translatey(110%);
+  transform: translatey(110%);
+}
+section[data-transition="cover"]:first-child,
+section[data-transition="cover"].show {
+  -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%);
+  -o-transform: translatey(0%);
+  transform: translatey(0%);
+}
+section[data-transition="fade"] {
+  opacity: 0;
+}
+section[data-transition="fade"]:first-child,
+section[data-transition="fade"].show {
+  opacity: 1;
+}
+section[data-transition="fade"]:hide {
+  opacity: 0;
 }
 header,
 footer {