From 82d90dd0f5803ee6efec88f20a49ef1637c9cf31 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Tue, 20 Jan 2026 19:58:28 +0000
Subject: [PATCH] fix transition on img

---
 nginx/vue/src/components/home/Listening.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/nginx/vue/src/components/home/Listening.vue b/nginx/vue/src/components/home/Listening.vue
index 7d313db..850d1dc 100644
--- a/nginx/vue/src/components/home/Listening.vue
+++ b/nginx/vue/src/components/home/Listening.vue
@@ -42,9 +42,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <Transition name="fade" mode="out-in">
+    <Transition v-if="song" name="fade" mode="out-in">
         <div
-            v-if="song"
             @click="nextSong"
             :key="song.track.id"
             class="flex-col center-content center-text"
@@ -54,13 +53,13 @@ onUnmounted(() => {
             <p><strong>Song:</strong> {{ song.track.name }}</p>
             <p><strong>Artist:</strong> {{ song.track.artists[0].name }}</p>
         </div>
-        <div v-else class="flex-col center-content center-text">
-            <h2>Listening To</h2>
-            <img src="/img/Untitled.png" />
-            <p><strong>Song:</strong> >_<</p>
-            <p><strong>Artist:</strong> ^_^</p>
-        </div>
     </Transition>
+    <div v-else class="flex-col center-content center-text">
+        <h2>Listening To</h2>
+        <img src="/img/Untitled.png" />
+        <p><strong>Song:</strong> >_<</p>
+        <p><strong>Artist:</strong> ^_^</p>
+    </div>
 </template>
 
 <style scoped>