Dodano animację listy w widoku pociągów

src/components/TrainsView/TrainTable.vue

@@ -4,14 +4,14 @@
       {{ $t('trains.distance-exceeded') }}
     </div>
 
+    <transition name="train-list-anim" mode="out-in">
+      <div :key="computedTrains.length+Number(timetableLoaded)">
         <div class="table-info no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
           {{ $t('trains.no-trains') }}
         </div>
-
         <div class="table-info loading" v-if="computedTrains.length == 0 && !timetableLoaded">
           {{ $t('trains.loading') }}
         </div>
-
         <ul class="train-list">
           <li
             class="train-row"
@@ -33,7 +33,6 @@
                     </span>
                   </div>
                 </div>
-
                 <div class="info_timetable" v-else>
                   <div class="timetable_general">
                     <span class="timetable_hero">
@@ -45,41 +44,33 @@
                           SKR
                         </span>
                       </span>
-
                       <span>
                         <strong>{{ train.timetableData.category }}</strong>
                         {{ train.trainNo }} |
                         <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
                       </span>
                     </span>
-
                     <span class="timetable_srjp g-tooltip">
                       <span class="activator">
                         SRJP
-
                         <img
                           :src="showedSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc"
                           alt="arrow-icon"
                         />
                       </span>
-
                       <span class="content"> {{ $t('trains.detailed-timetable') }} {{ train.trainNo }} </span>
                     </span>
                   </div>
-
                   <div class="timetable_route">
                     {{ train.timetableData.route.replace('|', ' - ') }}
                   </div>
-
                   <div class="timetable_stops">
                     <span v-if="train.timetableData.followingStops.length > 2">
                       {{ $t('trains.via-title') }}
-
                       <span v-html="displayStopList(train.timetableData.followingStops)"></span>
                     </span>
                   </div>
                 </div>
-
                 <div class="info_comments" v-if="getSceneriesWithComments(train.timetableData).length > 0">
                   <img
                     :src="icons.warning"
@@ -89,7 +80,6 @@
                   />
                 </div>
               </span>
-
               <span class="driver">
                 <div class="driver-info">
                   <span class="driver-name">
@@ -102,17 +92,14 @@
                     {{ train.locoType }}
                   </span>
                 </div>
-
                 <span class="driver-loco">
                   <div class="driver-cars">
                     <span v-if="train.cars.length > 0">
                       {{ $t('trains.cars') }}:
                       <span class="count">{{ train.cars.length }}</span>
                     </span>
-
                     <span v-else>{{ displayLocoInfo(train.locoType) }}</span>
                   </div>
-
                   <img
                     v-if="defaultVehicleIcons.includes(train.locoType)"
                     class="train-image"
@@ -122,7 +109,6 @@
                   <img v-else class="train-image" :src="train.locoURL" :alt="train.locoType" @error="onImageError" />
                 </span>
               </span>
-
               <span class="stats">
                 <div class="stats-main">
                   <span v-for="stat in stats.main" :key="stat.name">
@@ -130,7 +116,6 @@
                     {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
                   </span>
                 </div>
-
                 <div class="stats-position">
                   <span v-for="stat in stats.position" :key="stat.name">
                     <div>
@@ -141,8 +126,7 @@
                 </div>
               </span>
             </div>
-
+            <transition name="unfold-timetable-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave">
-        <transition name="unfold" @enter="enter" @afterEnter="afterEnter" @leave="leave">
               <TrainSchedule
                 v-if="showedSchedule === train.timetableData?.timetableId"
                 :followingStops="train.timetableData?.followingStops"
@@ -150,12 +134,13 @@
               />
             </transition>
           </li>
-
           <div class="table-info limit" v-if="timetableLoaded && computedTrains.length > 10">
             {{ $t('trains.table-limit') }}
           </div>
         </ul>
       </div>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts">
@@ -371,7 +356,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.unfold {
+.unfold-timetable-anim {
   &-leave-active,
   &-enter-active {
     transition: all 150ms ease-out;
@@ -379,6 +364,21 @@ export default defineComponent({
   }
 }
 
+.train-list-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
 .table-info {
   text-align: center;