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,15 +56,19 @@ 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;
       }
@@ -83,12 +88,16 @@ footer[role="tools"]{
       }
     }
     li.result{
-        flex-basis: percentage(2/$default_sum);
-        height: 5.3em;
-        overflow: hidden;
-        margin-bottom: 1em;
-        padding-right: 0.7em;
       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;
+      }
     }
     article.result.item{
       header{
@@ -111,6 +120,7 @@ footer[role="tools"]{
   }
   }
   #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,6 +8,7 @@
       </li>
       <li class="results">
         <div class="wrapper">
+          <transition name="fade" appear>
             <span
               v-if="resultsItems.length && !resultsOpened"
               title="Ouvrir les resultats"
@@ -16,6 +17,7 @@
             >
               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"