From ed289c7b9aa84d07aa7603d9a7ae8cb30cbf8a17 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 23 Feb 2024 18:19:32 -0800
Subject: [PATCH] add app transitions

---
 client/src/lib/Apps/Camera/Camera.svelte             | 6 +++---
 client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte | 3 +++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/lib/Apps/Camera/Camera.svelte b/client/src/lib/Apps/Camera/Camera.svelte
index 04bc726..e2842b5 100644
--- a/client/src/lib/Apps/Camera/Camera.svelte
+++ b/client/src/lib/Apps/Camera/Camera.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
   import CameraContainer from './CameraContainer.svelte'
+  import { fade } from 'svelte/transition'
 </script>
 
 <div
+  in:fade={{ duration: 150, delay: 150 }}
+  out:fade={{ duration: 150 }}
   class="flex gap-4 w-full py-40 px-10 backdrop-blur-lg justify-center h-full rounded-3xl shadow-md bg-slate-300 bg-opacity-30"
 >
   <div class="my-auto">
@@ -12,6 +15,3 @@
     <CameraContainer cameraUrl="camera_url_here" />
   </div>
 </div>
-
-<style lang="postcss">
-</style>
diff --git a/client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte b/client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte
index 343b82a..1492a4b 100644
--- a/client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte
+++ b/client/src/lib/Apps/MusicBrowser/MusicBrowser.svelte
@@ -6,10 +6,13 @@
 <script lang="ts">
   import Song from './Song.svelte'
   import { songList } from '../../Dashboard/MediaPlayer/songList'
+  import { fade } from 'svelte/transition'
 </script>
 
 <div
   class="flex gap-4 w-full py-10 px-10 bg-blue-200 bg-opacity-25 backdrop-blur-xl h-full media-background rounded-3xl flex-wrap"
+  in:fade={{ duration: 150, delay: 150 }}
+  out:fade={{ duration: 150 }}
 >
   <h2 class="text-8xl font-bold basis-full text-slate-200">Music</h2>
   <div class="basis-full h-2" />