Dodano animację dla listy historii dyżurnych

src/components/SceneryView/SceneryHistory.vue

@@ -2,7 +2,8 @@
   <div class="scenery-history">
     <h2>{{ $t('journal.title') }}</h2>
 
-    <ul>
+    <transition name="history-list-anim" mode="out-in">
+      <ul :key="dispatcherTimeline.length">
         <li v-if="!isLoaded">
           <h3>{{ $t('journal.loading') }}</h3>
         </li>
@@ -30,21 +31,18 @@
                 >
                 <span class="dispatcher-to text--primary"> {{ timestampToString(dispatcher.dispatcherTo, true) }}</span>
               </span>
-
               <b>{{ dispatcher.dispatcherName }}</b>
             </div>
           </span>
         </li>
       </ul>
+    </transition>
   </div>
 </template>
 
 <script lang="ts">
-import { GETTERS } from '@/constants/storeConstants';
-import { useStore } from '@/store';
 import axios from 'axios';
 import { defineComponent } from 'vue';
-import { useRouter } from 'vue-router';
 
 interface DispatcherTimeline {
   date: string;
@@ -146,6 +144,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.history-list-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
 .scenery-history {
   height: 600px;
   overflow-y: hidden;