Better perfomance in transitions

src/stylesheets/Lungo.layout.article.less

@@ -30,7 +30,12 @@ article {
     }
 
     &.pull {
-        .transition(all 300ms @defaultTrasition);
+        -webkit-transition-property: -webkit-transform;
+        -moz-transition-property: -moz-transform;
+        -ms-transition-property: -ms-transform;
+        -o-transition-property: -o-transform;
+        transition-property: transform;
+        .transition-duration(300ms);
     }
 
     & .text {

src/stylesheets/Lungo.layout.aside.less

@@ -11,12 +11,12 @@
 
 
 section.aside {
-    &:not(.small) { .transform(translate(@aside-width, 0)); }
-    &.small { .transform(translate(@aside-width-small, 0)); }
+    &:not(.small) { .transform(translateX(@aside-width)); }
+    &.small { .transform(translateX(@aside-width-small)); }
 
     &.right {
-        .transform(translate(-@aside-width, 0));
-        &.small { .transform(translate(-@aside-width-small, 0)); }
+        .transform(translateX(-@aside-width));
+        &.small { .transform(translateX(-@aside-width-small)); }
     }
 }
 

src/stylesheets/Lungo.layout.less

@@ -9,18 +9,29 @@
 
 @import "constants.less";
 
+body {
+
+}
 section {
-    // @todo: section position absolute or FIXED
-    // position: absolute; /* position: fixed on iOS5 & Android 4 */
-    position: fixed;
+    position: absolute;
     left:  0;
     top:  0;
     width: 100%;
     height: 100%;
     z-index: -1;
     display: none;
-    .transition(all 300ms @defaultTrasition);
+
+    -webkit-transition-property: opacity, z-index, -webkit-transform;
+    -moz-transition-property: opacity, z-index, -moz-transform;
+    -ms-transition-property: opacity, z-index, -ms-transform;
+    -o-transition-property: opacity, z-index, -o-transform;
+    transition-property: opacity, z-index, transform;
+    .transition-duration(300ms);
+    .transition-timing-function(@easeOutSine);
+
     .backface-visibility(hidden);
+    .transform(translateZ(0));
+
 
     &:first-child, &.show {
         z-index: 1;
@@ -53,6 +64,7 @@ section {
 
     &[data-transition="slide"] {
         .transform(translateX(100%));
+
         visibility: visible !important;
 
         & > header > *, & > article > * {
@@ -75,7 +87,6 @@ section {
         .transform(translateY(110%));
         &:first-child, &.show, &.hide {
             .transform(translateY(0%));
-            .transform(translateY(0%));
         }
     }
 

src/stylesheets/css/Lungo.layout.article.css

@@ -25,11 +25,16 @@ article:first-child {
   z-index: 1;
 }
 article.pull {
-  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition-property: -webkit-transform;
+  -moz-transition-property: -moz-transform;
+  -ms-transition-property: -ms-transform;
+  -o-transition-property: -o-transform;
+  transition-property: transform;
+  -webkit-transition-duration: 300ms;
+  -moz-transition-duration: 300ms;
+  -ms-transition-duration: 300ms;
+  -o-transition-duration: 300ms;
+  transition-duration: 300ms;
 }
 article .text {
   margin: 4px 0 8px;

src/stylesheets/css/Lungo.layout.aside.css

@@ -9,32 +9,32 @@
 /* DIMENSIONS */
 /* COLORS */
 section.aside:not(.small) {
-  -webkit-transform: translate(264px, 0);
-  -moz-transform: translate(264px, 0);
-  -ms-transform: translate(264px, 0);
-  -o-transform: translate(264px, 0);
-  transform: translate(264px, 0);
+  -webkit-transform: translateX(264px);
+  -moz-transform: translateX(264px);
+  -ms-transform: translateX(264px);
+  -o-transform: translateX(264px);
+  transform: translateX(264px);
 }
 section.aside.small {
-  -webkit-transform: translate(64px, 0);
-  -moz-transform: translate(64px, 0);
-  -ms-transform: translate(64px, 0);
-  -o-transform: translate(64px, 0);
-  transform: translate(64px, 0);
+  -webkit-transform: translateX(64px);
+  -moz-transform: translateX(64px);
+  -ms-transform: translateX(64px);
+  -o-transform: translateX(64px);
+  transform: translateX(64px);
 }
 section.aside.right {
-  -webkit-transform: translate(-264px, 0);
-  -moz-transform: translate(-264px, 0);
-  -ms-transform: translate(-264px, 0);
-  -o-transform: translate(-264px, 0);
-  transform: translate(-264px, 0);
+  -webkit-transform: translateX(-264px);
+  -moz-transform: translateX(-264px);
+  -ms-transform: translateX(-264px);
+  -o-transform: translateX(-264px);
+  transform: translateX(-264px);
 }
 section.aside.right.small {
-  -webkit-transform: translate(-64px, 0);
-  -moz-transform: translate(-64px, 0);
-  -ms-transform: translate(-64px, 0);
-  -o-transform: translate(-64px, 0);
-  transform: translate(-64px, 0);
+  -webkit-transform: translateX(-64px);
+  -moz-transform: translateX(-64px);
+  -ms-transform: translateX(-64px);
+  -o-transform: translateX(-64px);
+  transform: translateX(-64px);
 }
 aside {
   position: absolute;

src/stylesheets/css/Lungo.layout.css

@@ -9,23 +9,38 @@
 /* DIMENSIONS */
 /* COLORS */
 section {
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   display: none;
-  -webkit-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -moz-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -ms-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  -o-transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
-  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
+  -webkit-transition-property: opacity, z-index, -webkit-transform;
+  -moz-transition-property: opacity, z-index, -moz-transform;
+  -ms-transition-property: opacity, z-index, -ms-transform;
+  -o-transition-property: opacity, z-index, -o-transform;
+  transition-property: opacity, z-index, transform;
+  -webkit-transition-duration: 300ms;
+  -moz-transition-duration: 300ms;
+  -ms-transition-duration: 300ms;
+  -o-transition-duration: 300ms;
+  transition-duration: 300ms;
+  -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  -moz-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  -ms-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  -o-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
+  transition-timing-function: 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-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
 }
 section:first-child,
 section.show {
@@ -65,15 +80,15 @@ section[data-transition="pop"].hide {
   opacity: 0;
 }
 section[data-transition="slide"] {
-  -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"]  > header > *,
-section[data-transition="slide"]  > article > * {
+section[data-transition="slide"] > header > *,
+section[data-transition="slide"] > article > * {
   opacity: 0;
   -webkit-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
   -moz-transition: opacity 400ms cubic-bezier(0.39, 0.575, 0.565, 1);
@@ -83,49 +98,44 @@ section[data-transition="slide"]  > article > * {
 }
 section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
-  -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 > *,
-section[data-transition="slide"]:first-child  > article > *,
-section[data-transition="slide"].show  > article > * {
+  -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 > *,
+section[data-transition="slide"]:first-child > article > *,
+section[data-transition="slide"].show > article > * {
   opacity: 1;
 }
 section[data-transition="slide"].hide {
-  -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 > *,
-section[data-transition="slide"].hide  > article > * {
+  -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 > *,
+section[data-transition="slide"].hide > article > * {
   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,
 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%);
-  -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;

src/stylesheets/mixins.less

@@ -623,6 +623,22 @@
 //
 //============================================================
 
+.transition-duration(...) {
+    -webkit-transition-duration: @arguments;
+       -moz-transition-duration: @arguments;
+        -ms-transition-duration: @arguments;
+         -o-transition-duration: @arguments;
+            transition-duration: @arguments;
+}
+
+.transition-timing-function(...) {
+    -webkit-transition-timing-function: @arguments;
+       -moz-transition-timing-function: @arguments;
+        -ms-transition-timing-function: @arguments;
+         -o-transition-timing-function: @arguments;
+            transition-timing-function: @arguments;
+}
+
 .transition(...) {
     -webkit-transition: @arguments;
        -moz-transition: @arguments;