apache monitor animation

src/components/ApacheRestartMonitor.vue

@@ -1,19 +1,20 @@
 <template>
+  <transition name="bounce">
     <div
       v-if="isApacheNeedRestart || isApacheRestartPending"
       class="
         container
         d-flex
-      flex-row
+        flex-row flex-wrap
         rounded
         bg-warning bg-gradient
         shadow
         p-3
         mt-lg-5
-      w-50
       "
+      id="apache-monitor"
     >
-    <span class="fw-bold m-auto me-2">Apache: </span>
+      <span class="fw-bold m-auto me-2 ms-1">Apache: </span>
       <span
         v-if="isApacheNeedRestart && !isApacheRestartPending"
         class="badge rounded-pill bg-danger m-auto"
@@ -38,7 +39,7 @@
       <button
         v-if="isApacheNeedRestart && !isApacheRestartPending"
         type="button"
-      class="btn btn-danger btn-sm align-self-end shadow"
+        class="btn btn-danger btn-sm align-self-end shadow mt-1 mb-1"
         @click.prevent="updateApacheRestartFlag"
         title="Перезапустить Apache"
         v-tooltip:top
@@ -46,6 +47,7 @@
         Перезапустить
       </button>
     </div>
+  </transition>
 </template>
 
 <script>
@@ -63,3 +65,30 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+#apache-monitor {
+  min-width: 30%;
+  max-width: 40%;
+}
+
+.bounce-enter-active {
+  animation: bounce-in 0.7s ease-out both;
+}
+
+.bounce-leave-active {
+  animation: bounce-in 0.7s reverse ease-in both;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>