From a3926721cb47a902512423f2a01b49539dc61fb2 Mon Sep 17 00:00:00 2001
From: Preston <freetubeapp@protonmail.com>
Date: Sun, 20 Sep 2020 09:35:53 -0400
Subject: [PATCH] Add animation for router change

---
 src/renderer/App.css | 17 +++++++++++++++++
 src/renderer/App.vue |  6 +++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index 05e5bb75..d80c9ec8 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -23,9 +23,26 @@ body {
   margin-left: 80px;
 }
 
+.banner {
+  margin-top: 70px;
+  margin-bottom: -65px;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .2s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+
 @media only screen and (max-width: 680px) {
   .expand, .routerView {
     margin-left: 0px;
     margin-bottom: 80px;
   }
+
+  .banner {
+    margin-top: 70px;
+    margin-bottom: -65px;
+  }
 }
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 6f1547f8..3e0e6f78 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -8,9 +8,9 @@
   >
     <top-nav ref="topNav" />
     <side-nav ref="sideNav" />
-    <Transition
+    <transition
       mode="out-in"
-      name="slide-up"
+      name="fade"
     >
       <!-- <keep-alive> -->
       <RouterView
@@ -19,7 +19,7 @@
         :class="{ expand: !isOpen }"
       />
       <!-- </keep-alive> -->
-    </Transition>
+    </transition>
     <ft-toast />
     <ft-progress-bar
       v-if="showProgressBar"