From 3afdd2079f96d3e365008232af94ffbfd0276112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga.fer@gmail.com>
Date: Thu, 7 Jan 2021 23:20:24 +0100
Subject: [PATCH] feat: add transition to audio controls

---
 assets/global.scss  | 10 ++++++++++
 layouts/default.vue | 14 ++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/assets/global.scss b/assets/global.scss
index 33a88203..b230ca3f 100644
--- a/assets/global.scss
+++ b/assets/global.scss
@@ -55,6 +55,16 @@ body {
   opacity: 0;
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
 /* Vuetify overrides */
 
 // We can't set these through variables, so override them here */
diff --git a/layouts/default.vue b/layouts/default.vue
index 0bc4ebf2..2caa3f1d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -94,12 +94,14 @@
     <v-main>
       <nuxt />
     </v-main>
-    <v-footer
-      v-if="isPlaying && getCurrentlyPlayingMediaType() === 'Audio'"
-      app
-    >
-      <audio-controls />
-    </v-footer>
+    <transition name="fade" mode="in-out">
+      <v-footer
+        v-if="isPlaying && getCurrentlyPlayingMediaType() === 'Audio'"
+        app
+      >
+        <audio-controls />
+      </v-footer>
+    </transition>
     <!-- Utilities and global systems -->
     <snackbar />
     <player-manager />