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">
-      <span
+    <transition-group name="spawns-anim" tag="ul">
+      <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>
-    </span>
-
-    <span class="badge spawn badge-none" v-if="!onlineScenery || onlineScenery.spawns.length == 0"
-      >{{ $t('scenery.no-spawns') }}
-    </span>
+      </li>
+    </transition-group>
   </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>