Perfomance in a call to a section from aside

src/element/Lungo.Element.Pull.js

@@ -12,7 +12,7 @@
 Lungo.Element.Pull = function(element_selector, config_data) {
 
     var REFRESHING_HEIGHT = 60;
-    var MAX_HEIGHT = 100;
+    var MAX_HEIGHT = 80;
     var ANIMATION_TIME = 300;
     var CURRENT_DISTANCE = 0;
     var REFRESHING = false;

src/stylesheets/Lungo.layout.article.styl

@@ -25,9 +25,9 @@ article
     display: block
     z-index: 1
 
-  &.pull
-    transition-property(transform)
-    transition-duration(300ms)
+    &.pull
+      transition-property(transform)
+      transition-duration(TRANSITION_TIME)
 
 header
   &:not(.extended) ~ article

src/stylesheets/Lungo.layout.styl

@@ -16,7 +16,9 @@ body
 
   &[data-position="fixed"] > section
     position: fixed
+
     &[data-transition]
+      display: block !important
       transition-property( opacity, z-index, transform )
       transition-duration( TRANSITION_TIME )
       transition-timing-function( DEFAULT_TRANSITION )
@@ -27,22 +29,12 @@ section
   left:  0
   width: 100%
   height: 100%
-  z-index: -1
+  z-index: 1
   display: none
-
-
-
   &.show
-    z-index: 1
+    z-index: 2
     display: block
 
-  &.hide
-    z-index: -1
-    display: none
-
-  &[data-transition]
-    display: block !important
-
   /* Transition: POP */
   &[data-transition="pop"]
     opacity: 0

src/stylesheets/Lungo.widgets.pull.styl

@@ -10,7 +10,7 @@
 @import "import/constants.styl"
 @import "import/vendor.styl"
 
-section > [data-control="pull"]
+section.show > [data-control="pull"]
   position: absolute
   z-index: -1
   top: HEADER_FOOTER_HEIGHT

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

@@ -12,22 +12,26 @@ article {
   bottom: 0;
   width: inherit;
   height: auto;
-  display: none;
   visibility: hidden;
+  display: none;
   z-index: 0;
 }
-article.active {
+.show > article.active,
+.hide > article.active,
+.hiding > article.active {
   visibility: visible;
   display: block;
   z-index: 1;
 }
-article.pull {
+.show > article.active.pull,
+.hide > article.active.pull,
+.hiding > article.active.pull {
   -webkit-transition-property: transform;
   -moz-transition-property: transform;
   transition-property: transform;
-  -webkit-transition-duration: 300ms;
-  -moz-transition-duration: 300ms;
-  transition-duration: 300ms;
+  -webkit-transition-duration: 350ms;
+  -moz-transition-duration: 350ms;
+  transition-duration: 350ms;
 }
 header:not(.extended) ~ article {
   top: 44px;

src/stylesheets/css/Lungo.layout.css

@@ -6,14 +6,14 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-section {
+body[data-position="absolute"] > section {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  display: none;
+}
+body[data-position="fixed"] > section {
+  position: fixed;
+}
+body[data-position="fixed"] > section[data-transition] {
+  display: block !important;
   -webkit-transition-property: opacity z-index transform;
   -moz-transition-property: opacity z-index transform;
   transition-property: opacity z-index transform;
@@ -23,36 +23,32 @@ section {
   -webkit-transition-timing-function: easeOutSine;
   -moz-transition-timing-function: easeOutSine;
   transition-timing-function: easeOutSine;
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  transform: translateZ(0);
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   backface-visibility: hidden;
+}
+section {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  display: none;
 /* Transition: POP */
 /* Transition: SLIDE */
 /* Transition: COVER */
 /* Transition: FADE */
 }
-section:first-child,
 section.show {
-  z-index: 1;
+  z-index: 2;
   display: block;
 }
-section.hide {
-  z-index: -1;
-  display: none;
-}
-section[data-transition] {
-  display: block !important;
-}
 section[data-transition="pop"] {
   opacity: 0;
   -webkit-transform: scale(1.15);
   -moz-transform: scale(1.15);
   transform: scale(1.15);
 }
-section[data-transition="pop"]:first-child,
 section[data-transition="pop"].show {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
@@ -71,7 +67,6 @@ section[data-transition="slide"] {
   transform: translateX(100%);
   visibility: visible !important;
 }
-section[data-transition="slide"]:first-child,
 section[data-transition="slide"].show {
   -webkit-transform: translateX(0%);
   -moz-transform: translateX(0%);
@@ -87,7 +82,6 @@ section[data-transition="cover"] {
   -moz-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%);

src/stylesheets/css/Lungo.widgets.pull.css

@@ -6,7 +6,7 @@
  *
  * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
  */
-section > [data-control="pull"] {
+section.show > [data-control="pull"] {
   position: absolute;
   z-index: -1;
   top: 44px;
@@ -15,7 +15,7 @@ section > [data-control="pull"] {
   padding: 10px 0;
   text-align: center;
 }
-section > [data-control="pull"] > .icon {
+section.show > [data-control="pull"] > .icon {
   display: inline-block;
   width: 48px;
   height: 48px;
@@ -25,24 +25,24 @@ section > [data-control="pull"] > .icon {
   -moz-transition: all 300ms;
   transition: all 300ms;
 }
-section > [data-control="pull"] > .loading {
+section.show > [data-control="pull"] > .loading {
   display: none;
   left: 0%;
 }
-section > [data-control="pull"] > strong {
+section.show > [data-control="pull"] > strong {
   position: relative;
   top: -16px;
   margin-left: 4px;
   font-size: 1.1em;
 }
-section > [data-control="pull"].rotate > .icon {
+section.show > [data-control="pull"].rotate > .icon {
   -webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);
 }
-section > [data-control="pull"].refresh > .icon {
+section.show > [data-control="pull"].refresh > .icon {
   display: none;
 }
-section > [data-control="pull"].refresh > .loading {
+section.show > [data-control="pull"].refresh > .loading {
   display: inline-block;
 }