apache monitor animation

src/components/ApacheRestartMonitor.vue

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