mastered vuejs transitions

assets/css/app.scss

@@ -4,6 +4,7 @@
 @import './base/grid-flex';
 @import './base/layout';
 @import './base/fonts';
+@import './base/transitions';
 
 
 body{
@@ -55,62 +56,71 @@ section[role="main-content"]{
 
 }
 footer[role="tools"]{
+  $list-item-h: 5.3em;
   #history{
+    z-index: 8;
     background-color: $or;
     padding:1.2em $side-padding;
   }
   #results{
+    z-index: 9;
     background-color: $gris;
-    max-height: 50vh;
     padding:1.2em $side-padding;
-    section.col-1{
+    max-height: $list-item-h * 3;
+    @include accordeon-transition($list-item-h * 3);
+    >header{
       .results-count{
         font-size: 0.756em;
       }
     }
     .results-list{
-      overflow-x: hidden;
+    overflow-x: hidden;
-      .wrapper{
+    .wrapper{
-        height:100%;
+      height:100%;
-        overflow-y: auto;
+      overflow-y: auto;
-        width:calc(100% + 1em);
+      width:calc(100% + 1em);
-        padding-right: 1em;
+      padding-right: 1em;
-        >ul{
+      >ul{
-          padding:0;
+        padding:0;
-          display: flex;
+        display: flex;
-          flex-direction: row;
+        flex-direction: row;
-          flex-wrap: wrap;
+        flex-wrap: wrap;
-        }
       }
-      li.result{
+    }
-        flex-basis: percentage(2/$default_sum);
+    li.result{
-        height: 5.3em;
+      box-sizing: border-box;
+      flex-basis: percentage(2/$default_sum);
+      height: $list-item-h;
+      overflow: hidden;
+      padding-bottom: 1em;
+      padding-right: 0.7em;
+      article{
+        max-height: 100%;
         overflow: hidden;
-        margin-bottom: 1em;
-        padding-right: 0.7em;
-        box-sizing: border-box;
       }
-      article.result.item{
+    }
-        header{
+    article.result.item{
-          h1{
+      header{
-            font-size: 0.882em;
+        h1{
-            font-weight: normal;
+          font-size: 0.882em;
-            margin:0 0 0.5em 0;
+          font-weight: normal;
-          }
+          margin:0 0 0.5em 0;
         }
-        .extract{
+      }
-          p{
+      .extract{
-            font-size: 0.882em;
+        p{
-            margin:0;
+          font-size: 0.882em;
-          }
+          margin:0;
-          code{
+        }
-            background-color: lighten(desaturate($rouge,20%), 20%);
+        code{
-          }
+          background-color: lighten(desaturate($rouge,20%), 20%);
         }
       }
     }
   }
+  }
   #footer-bottom{
+    z-index: 10;
     padding:0 $side-padding;
     background-color: $bleuroi;
     &>*{
@@ -143,6 +153,7 @@ footer[role="tools"]{
             font-weight: 400;
             text-transform: uppercase;
             cursor: pointer;
+            @include fade-transition;
           }
         }
       }
@@ -219,20 +230,3 @@ span.mdi-loading{
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-
-
-//  _                    _ _   _
-// | |_ _ _ __ _ _ _  __(_) |_(_)___ _ _  ___
-// |  _| '_/ _` | ' \(_-< |  _| / _ \ ' \(_-<
-//  \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
-
-.fade-roll-enter-active{
-  transition: all .3s ease-in-out;
-}
-.fade-roll-leave-active{
-  transition: all .8s ease;
-}
-.fade-roll-enter, .fade-roll-leave-to{
-  opacity:0;
-  // height:1px;
-}

assets/css/base/_transitions.scss

@@ -0,0 +1,47 @@
+
+//  _                    _ _   _
+// | |_ _ _ __ _ _ _  __(_) |_(_)___ _ _  ___
+// |  _| '_/ _` | ' \(_-< |  _| / _ \ ' \(_-<
+//  \__|_| \__,_|_||_/__/_|\__|_\___/_||_/__/
+@mixin accordeon-transition($h){
+  &.accordeon-enter,
+  &.accordeon-leave-to{
+    // opacity: 0;
+    height:0.01vh;
+    padding-top: 0;
+    padding-bottom: 0;
+    // transform: translateY(100%);
+    // transform: translate3d(0, 100%, 0);
+  }
+  &.accordeon-enter-to,
+  &.accordeon-leave{
+    // opacity:1;
+    height:$h;
+    // transform: translateY(0%);
+    // transform: translate3d(0, 0, 0);
+  }
+  &.accordeon-enter-active{
+    transition: all 300ms ease-in-out;
+  }
+  &.accordeon-leave-active{
+    transition: all 200ms ease-in-out;
+  }
+
+}
+
+@mixin fade-transition() {
+  &.fade-enter,
+  &.fade-leave-to{
+    opacity: 0;
+  }
+  &.fade-enter-to,
+  &.fade-leave{
+    opacity:1;
+  }
+  &.fade-enter-active{
+    transition: all 300ms ease-in-out;
+  }
+  &.fade-leave-active{
+    transition: all 200ms ease-in-out;
+  }
+}

src/components/nav/FooterTabs.vue

@@ -8,14 +8,16 @@
       </li>
       <li class="results">
         <div class="wrapper">
-          <span
+          <transition name="fade" appear>
-            v-if="resultsItems.length && !resultsOpened"
+            <span
-            title="Ouvrir les resultats"
+              v-if="resultsItems.length && !resultsOpened"
-            @click.prevent="openResults"
+              title="Ouvrir les resultats"
-            @keydown.enter.prevent="openResults"
+              @click.prevent="openResults"
-          >
+              @keydown.enter.prevent="openResults"
-            Resultas
+            >
-          </span>
+              Resultas
+            </span>
+          </transition>
         </div>
       </li>
     </ul>

src/components/nav/Results.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="fade-roll">
+  <transition name="accordeon" appear>
     <div
       v-if="opened"
       id="results"