add animation for page change

src/assets/app.scss

@@ -183,3 +183,20 @@ h2 {
         background-color: $dark-bg;
     }
 }
+
+/*
+ * Transitions
+ */
+
+// page-change
+.slide-fade-enter-active {
+    transition: all 0.20s $easing-in;
+}
+.slide-fade-leave-active {
+    transition: all 0.20s $easing-in;
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+    transform: translateY(50px);
+    opacity: 0;
+}

src/assets/vars.scss

@@ -12,3 +12,7 @@ $dark-font-color2: #020b05;
 $dark-bg: #0D1117;
 $dark-bg2: #070A10;
 $dark-border-color: #1d2634;
+
+$easing-in: cubic-bezier(0.54,0.78,0.55,0.97);
+$easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$easing-in-out: cubic-bezier(0.79, 0.14, 0.15, 0.86);

src/pages/DashboardHome.vue

@@ -1,4 +1,5 @@
 <template>
+    <transition name="slide-fade" appear>
         <div v-if="$route.name === 'DashboardHome'">
             <h1 class="mb-3">
                 Quick Stats
@@ -72,7 +73,7 @@
                 </div>
             </div>
         </div>
-
+    </transition>
     <router-view ref="child" />
 </template>
 

src/pages/Details.vue

@@ -1,4 +1,6 @@
 <template>
+    <transition name="slide-fade" appear>
+        <div>
             <h1> {{ monitor.name }}</h1>
             <p class="url">
                 <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank">{{ monitor.url }}</a>
@@ -74,14 +76,7 @@
                 </div>
             </div>
 
-    <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
-        <div class="row">
-            <div class="col">
-                <PingChart :monitor-id="monitor.id" />
-            </div>
-        </div>
-    </div>
-
+            <transition name="slide-fade" appear>
                 <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
                     <div class="row">
                         <div class="col">
@@ -123,6 +118,15 @@
                         </div>
                     </div>
                 </div>
+            </transition>
+
+            <div v-if="showPingChartBox" class="shadow-box big-padding text-center ping-chart-wrapper">
+                <div class="row">
+                    <div class="col">
+                        <PingChart :monitor-id="monitor.id" />
+                    </div>
+                </div>
+            </div>
 
             <div class="shadow-box">
                 <table class="table table-borderless table-hover">
@@ -164,6 +168,8 @@
             <Confirm ref="confirmDelete" btn-style="btn-danger" @yes="deleteMonitor">
                 Are you sure want to delete this monitor?
             </Confirm>
+        </div>
+    </transition>
 </template>
 
 <script>

src/pages/EditMonitor.vue

@@ -1,4 +1,6 @@
 <template>
+    <transition name="slide-fade" appear>
+        <div>
             <h1 class="mb-3">{{ pageName }}</h1>
             <form @submit.prevent="submit">
                 <div class="shadow-box">
@@ -145,6 +147,8 @@
             </form>
 
             <NotificationDialog ref="notificationDialog" />
+        </div>
+    </transition>
 </template>
 
 <script>

src/pages/Settings.vue

@@ -1,5 +1,7 @@
 <template>
-    <h1 class="mb-3">
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 v-show="show" class="mb-3">
                 Settings
             </h1>
 
@@ -150,6 +152,8 @@
                 <p>It is for <strong>someone who have 3rd-party auth</strong> in front of  Uptime Kuma such as Cloudflare Access.</p>
                 <p>Please use it carefully.</p>
             </Confirm>
+        </div>
+    </transition>
 </template>
 
 <script>
@@ -174,7 +178,7 @@ export default {
         return {
             timezoneList: timezoneList(),
             guessTimezone: dayjs.tz.guess(),
-
+            show: true,
             invalidPassword: false,
             password: {
                 currentPassword: "",