apache monitor animation

src/components/ApacheRestartMonitor.vue

@@ -1,51 +1,53 @@
 <template>
-  <div
-    v-if="isApacheNeedRestart || isApacheRestartPending"
-    class="
-      container
-      d-flex
-      flex-row
-      rounded
-      bg-warning bg-gradient
-      shadow
-      p-3
-      mt-lg-5
-      w-50
-    "
-  >
-    <span class="fw-bold m-auto me-2">Apache: </span>
-    <span
-      v-if="isApacheNeedRestart && !isApacheRestartPending"
-      class="badge rounded-pill bg-danger m-auto"
-      >Нужен перезапуск</span
+  <transition name="bounce">
+    <div
+      v-if="isApacheNeedRestart || isApacheRestartPending"
+      class="
+        container
+        d-flex
+        flex-row flex-wrap
+        rounded
+        bg-warning bg-gradient
+        shadow
+        p-3
+        mt-lg-5
+      "
+      id="apache-monitor"
     >
-    <span
-      v-if="isApacheRestartPending"
-      class="badge rounded-pill bg-success m-auto"
-      >Перезапуск</span
-    >
-    <span class="flex-fill"></span>
-    <button
-      v-if="isApacheRestartPending"
-      type="button"
-      class="btn btn-success btn-sm align-self-end shadow"
-      @click.prevent="fetchApacheRestartFlag"
-      title="Обновить статус"
-      v-tooltip:top
-    >
-      Обновить
-    </button>
-    <button
-      v-if="isApacheNeedRestart && !isApacheRestartPending"
-      type="button"
-      class="btn btn-danger btn-sm align-self-end shadow"
-      @click.prevent="updateApacheRestartFlag"
-      title="Перезапустить Apache"
-      v-tooltip:top
-    >
-      Перезапустить
-    </button>
-  </div>
+      <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"
+        >Нужен перезапуск</span
+      >
+      <span
+        v-if="isApacheRestartPending"
+        class="badge rounded-pill bg-success m-auto"
+        >Перезапуск</span
+      >
+      <span class="flex-fill"></span>
+      <button
+        v-if="isApacheRestartPending"
+        type="button"
+        class="btn btn-success btn-sm align-self-end shadow"
+        @click.prevent="fetchApacheRestartFlag"
+        title="Обновить статус"
+        v-tooltip:top
+      >
+        Обновить
+      </button>
+      <button
+        v-if="isApacheNeedRestart && !isApacheRestartPending"
+        type="button"
+        class="btn btn-danger btn-sm align-self-end shadow mt-1 mb-1"
+        @click.prevent="updateApacheRestartFlag"
+        title="Перезапустить Apache"
+        v-tooltip:top
+      >
+        Перезапустить
+      </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>