Dodano animację dla rozkładów jazdy w widoku scenerii

src/components/SceneryView/SceneryTimetable.vue

@@ -20,6 +20,8 @@
       </button>
     </div>
 
+    <transition name="scenery-timetable-list-anim" mode="out-in">
+      <div :key="timetableDataStatus + computedScheduledTrains.length">
         <span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0">
           {{ $t('app.loading') }}
         </span>
@@ -28,7 +30,6 @@
           {{ $t('scenery.no-timetables') }}
         </span>
 
-    <transition-group name="list-anim">
         <div
           class="timetable-item"
           v-for="(scheduledTrain, i) in computedScheduledTrains"
@@ -47,17 +48,14 @@
               <span style="color: white">
                 {{ scheduledTrain.driverName }}
               </span>
-
               <div class="info-route">
                 <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
               </div>
             </span>
-
             <span class="general-status">
               <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
             </span>
           </span>
-
           <span class="timetable-schedule">
             <span class="schedule-arrival">
               <span
@@ -70,7 +68,6 @@
                 {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
               </span>
             </span>
-
             <span class="schedule-stop">
               <span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
                 {{ scheduledTrain.stopInfo.stopTime }}
@@ -91,7 +88,8 @@
             </span>
           </span>
         </div>
-    </transition-group>
+      </div>
+    </transition>
   </div>
 </template>
 
@@ -223,20 +221,18 @@ h3 {
   }
 }
 
-.list-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 250ms ease-out;
-  }
-
-  &-enter,
+.scenery-timetable-list-anim {
+  &-enter-from,
   &-leave-to {
     opacity: 0;
-    transform: scale(0.9);
   }
 
-  &-move {
-    transition: transform 100ms;
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
   }
 }