From 023baa493246b576a5060c39c104dee5b866f3fa Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 14 Dec 2016 16:34:46 -0200
Subject: [PATCH] improve documentation performance

---
 docs/src/App.vue                     | 28 +++++++++++++++++++++++-----
 src/components/mdList/mdListItem.vue | 16 +++++++---------
 src/core/stylesheets/variables.scss  |  2 +-
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/docs/src/App.vue b/docs/src/App.vue
index 24f7830..daae611 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -160,7 +160,7 @@
       </div>
     </md-sidenav>
 
-    <transition name="md-router">
+    <transition name="md-router" appear>
       <router-view></router-view>
     </transition>
   </div>
@@ -178,6 +178,7 @@
   html,
   body {
     height: 100%;
+    overflow: hidden;
   }
 
   body {
@@ -259,7 +260,10 @@
     padding: 16px;
     flex: 1;
     overflow: auto;
+    background-color: #fff;
     transform: translate3D(0, 0, 0);
+    transition: $swift-ease-out;
+    transition-delay: .2s;
   }
 
   .md-router-enter-active,
@@ -268,16 +272,30 @@
     top: 0;
     right: 0;
     left: 0;
-    transition: $swift-ease-out;
 
     @media (min-width: 1281px) {
-      left: 280px;
+      left: $sizebar-size;
+    }
+
+    .main-content {
+      opacity: 0;
+      overflow: hidden;
     }
   }
 
-  .md-router-enter,
   .md-router-leave-active {
-    opacity: 0;
+    z-index: 1;
+    transition: $swift-ease-in;
+    transition-duration: .25s;
+  }
+
+  .md-router-enter-active {
+    z-index: 2;
+    transition: $swift-ease-out;
+
+    .main-content {
+      transform: translate3D(0, 7%, 0);
+    }
   }
 
   code {
diff --git a/src/components/mdList/mdListItem.vue b/src/components/mdList/mdListItem.vue
index 689b045..3a1b681 100644
--- a/src/components/mdList/mdListItem.vue
+++ b/src/components/mdList/mdListItem.vue
@@ -26,13 +26,14 @@
         return createElement('div', { staticClass: holderClass }, content);
       };
 
+      let createRipple = () => {
+        return createElement('md-ink-ripple');
+      };
+
       let createCompatibleRouterLink = () => {
         slot[0].data.staticClass = containerClass + ' ' + holderClass;
-        slot[0].data.directives = [{
-          name: 'md-ink-ripple'
-        }];
 
-        return createElement('li', listItemSpec, slot);
+        return createElement('li', listItemSpec, [...slot, createRipple()]);
       };
 
       let prepareExpandList = () => {
@@ -92,11 +93,8 @@
               handleExpandClick(this);
               this.$emit('click');
             }
-          },
-          directives: [{
-            name: 'md-ink-ripple'
-          }]
-        }, [createItemHolder(slot)]);
+          }
+        }, [createItemHolder(slot), createRipple()]);
       };
 
       let createExpandList = () => {
diff --git a/src/core/stylesheets/variables.scss b/src/core/stylesheets/variables.scss
index ee6506a..ca2dc28 100644
--- a/src/core/stylesheets/variables.scss
+++ b/src/core/stylesheets/variables.scss
@@ -25,7 +25,7 @@ $swift-ease-in-out-duration: .5s !default;
 $swift-ease-in-out-timing-function: cubic-bezier(.35, 0, .25, 1) !default;
 $swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
 
-$swift-linear-duration: .08s !default;
+$swift-linear-duration: .15s !default;
 $swift-linear-timing-function: linear !default;
 $swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;