chore: list animations

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">
+      <transition-group class="relative" tag="ul" name="list">
-        <li v-for="timetable in filteredTimetables" class="flex gap-1">
+        <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>

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;