feat: add transition to audio controls

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 */

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 />