animacje userów i spawnów scenerii

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -6,8 +6,12 @@
       <span class="text--primary">{{ onlineScenery?.spawns.length || '0' }}</span>
     </h3>
 
-    <span v-if="onlineScenery">
+    <transition-group name="spawns-anim" tag="ul">
-      <span
+      <li class="badge spawn badge-none" v-if="!onlineScenery || onlineScenery.spawns.length == 0" key="no-spawns">
+        {{ $t('scenery.no-spawns') }}
+      </li>
+
+      <li
         class="badge spawn"
         v-for="(spawn, i) in sortedSpawns"
         :key="spawn.spawnName + onlineScenery?.dispatcherName + i"
@@ -15,12 +19,8 @@
       >
         <span class="spawn_name">{{ spawn.spawnName }}</span>
         <span class="spawn_length">{{ spawn.spawnLength }}m</span>
-      </span>
+      </li>
-    </span>
+    </transition-group>
-
-    <span class="badge spawn badge-none" v-if="!onlineScenery || onlineScenery.spawns.length == 0"
-      >{{ $t('scenery.no-spawns') }}
-    </span>
   </section>
 </template>
 
@@ -51,6 +51,10 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/variables.scss';
 
+ul {
+  position: relative;
+}
+
 .spawn {
   color: white;
 
@@ -63,4 +67,22 @@ export default defineComponent({
     background-color: #007599;
   }
 }
+
+.spawns-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
 </style>

src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue

@@ -7,25 +7,24 @@
       >&nbsp;/&nbsp;<span class="text--primary">{{ onlineScenery?.maxUsers || 0 }}</span>
     </h3>
 
-    <div
+    <transition-group name="users-anim" tag="ul">
-      v-for="train in onlineScenery?.stationTrains"
+      <li class="badge user badge-none" v-if="!onlineScenery?.stationTrains?.length" key="no-users">
-      class="badge user"
+        {{ $t('scenery.no-users') }}
-      :class="train.stopStatus"
+      </li>
-      :key="train.trainId"
-      tabindex="0"
-      @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
-      @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
-    >
-      <span class="user_train">{{ train.trainNo }}</span>
-      <span class="user_name">{{ train.driverName }}</span>
-    </div>
 
-    <div
+      <li
-      class="badge user badge-none"
+        v-for="train in onlineScenery?.stationTrains"
-      v-if="!onlineScenery?.stationTrains?.length"
+        class="badge user"
-    >
+        :class="train.stopStatus"
-      {{ $t('scenery.no-users') }}
+        :key="train.trainId"
-    </div>
+        tabindex="0"
+        @click.prevent="selectModalTrain(train.trainId, $event.currentTarget)"
+        @keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
+      >
+        <span class="user_train">{{ train.trainNo }}</span>
+        <span class="user_name">{{ train.driverName }}</span>
+      </li>
+    </transition-group>
   </section>
 </template>
 
@@ -57,12 +56,10 @@ $disconnected: slategray;
 
 .info-user-list {
   width: 100%;
+}
 
-  ul {
+ul {
-    display: flex;
+  position: relative;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
 }
 
 .user {
@@ -106,4 +103,21 @@ $disconnected: slategray;
     pointer-events: none;
   }
 }
+.users-anim {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 250ms ease;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(5px);
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
 </style>