From 5616fbd7cf135f32a410b3ccb4561dc41b9abc32 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 31 Jan 2025 18:45:03 +0100
Subject: [PATCH] chore: list animations

---
 src/components/Timetable/TimetableStorage.vue |  6 +++---
 src/style.css                                 | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/Timetable/TimetableStorage.vue b/src/components/Timetable/TimetableStorage.vue
index e9f2ef7..44a4c4f 100644
--- a/src/components/Timetable/TimetableStorage.vue
+++ b/src/components/Timetable/TimetableStorage.vue
@@ -9,8 +9,8 @@
       <div class="font-bold text-xl p-2 bg-zinc-700 mb-3">{{ $t('storage-preview-title') }}</div>
       <div class="font-bold p-2 bg-zinc-800 mb-3" v-if="filteredTimetables.length == 0">{{ $t('storage-preview-empty') }}</div>
 
-      <ul class="flex flex-col gap-3">
-        <li v-for="timetable in filteredTimetables" class="flex gap-1">
+      <transition-group class="relative" tag="ul" name="list">
+        <li v-for="timetable in filteredTimetables" class="flex gap-1 w-full my-2">
           <button class="bg-zinc-900 p-2 w-full cursor-pointer hover:bg-zinc-800 text-left" @click="selectTimetable(timetable)">
             <div class="text-zinc-300">#{{ timetable.timetableId }} &bull; {{ new Date(timetable.savedTimestamp!).toLocaleString() }}</div>
             <b>{{ timetable.driverName }} | {{ timetable.category }} {{ timetable.trainNo }}</b> {{ timetable.route.replace('|', ' > ') }}
@@ -20,7 +20,7 @@
             <TrashIcon class="size-5 text-white" />
           </button>
         </li>
-      </ul>
+      </transition-group>
     </div>
   </div>
 </template>
diff --git a/src/style.css b/src/style.css
index 3e7c5f5..54a9db7 100644
--- a/src/style.css
+++ b/src/style.css
@@ -55,6 +55,25 @@ body {
   visibility: visible;
 }
 
+/* Animations */
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.25s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.list-leave-active {
+  position: absolute;
+  width: 100%;
+}
+
+/* Print mode */
 @media print {
   :root {
     color-scheme: light;