add animation for page change

louislam · Aug 19, 2021 · f21937b · f21937b
1 parent 209e44c
commit f21937b
Show file tree

Hide file tree

Showing 6 changed files with 513 additions and 477 deletions.
diff --git a/src/assets/app.scss b/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;
+}
diff --git a/src/assets/vars.scss b/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);
diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
@@ -1,78 +1,79 @@
 <template>
-    <div v-if="$route.name === 'DashboardHome'">
-        <h1 class="mb-3">
-            Quick Stats
-        </h1>
-
-        <div class="shadow-box big-padding text-center">
-            <div class="row">
-                <div class="col">
-                    <h3>Up</h3>
-                    <span class="num">{{ stats.up }}</span>
+    <transition name="slide-fade" appear>
+        <div v-if="$route.name === 'DashboardHome'">
+            <h1 class="mb-3">
+                Quick Stats
+            </h1>
+
+            <div class="shadow-box big-padding text-center">
+                <div class="row">
+                    <div class="col">
+                        <h3>Up</h3>
+                        <span class="num">{{ stats.up }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Down</h3>
+                        <span class="num text-danger">{{ stats.down }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Unknown</h3>
+                        <span class="num text-secondary">{{ stats.unknown }}</span>
+                    </div>
+                    <div class="col">
+                        <h3>Pause</h3>
+                        <span class="num text-secondary">{{ stats.pause }}</span>
+                    </div>
                 </div>
-                <div class="col">
-                    <h3>Down</h3>
-                    <span class="num text-danger">{{ stats.down }}</span>
-                </div>
-                <div class="col">
-                    <h3>Unknown</h3>
-                    <span class="num text-secondary">{{ stats.unknown }}</span>
-                </div>
-                <div class="col">
-                    <h3>Pause</h3>
-                    <span class="num text-secondary">{{ stats.pause }}</span>
-                </div>
-            </div>
-            <div v-if="false" class="row">
-                <div class="col-3">
-                    <h3>Uptime</h3>
-                    <p>(24-hour)</p>
-                    <span class="num" />
-                </div>
-                <div class="col-3">
-                    <h3>Uptime</h3>
-                    <p>(30-day)</p>
-                    <span class="num" />
+                <div v-if="false" class="row">
+                    <div class="col-3">
+                        <h3>Uptime</h3>
+                        <p>(24-hour)</p>
+                        <span class="num" />
+                    </div>
+                    <div class="col-3">
+                        <h3>Uptime</h3>
+                        <p>(30-day)</p>
+                        <span class="num" />
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
-            <table class="table table-borderless table-hover">
-                <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Status</th>
-                        <th>DateTime</th>
-                        <th>Message</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-for="(beat, index) in displayedRecords" :key="index">
-                        <td>{{ beat.name }}</td>
-                        <td><Status :status="beat.status" /></td>
-                        <td><Datetime :value="beat.time" /></td>
-                        <td>{{ beat.msg }}</td>
-                    </tr>
-
-                    <tr v-if="importantHeartBeatList.length === 0">
-                        <td colspan="4">
-                            No important events
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div class="d-flex justify-content-center kuma_pagination">
-                <pagination
-                    v-model="page"
-                    :records="importantHeartBeatList.length"
-                    :per-page="perPage"
-                />
+            <div class="shadow-box" style="margin-top: 25px;overflow-x: scroll">
+                <table class="table table-borderless table-hover">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Status</th>
+                            <th>DateTime</th>
+                            <th>Message</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(beat, index) in displayedRecords" :key="index">
+                            <td>{{ beat.name }}</td>
+                            <td><Status :status="beat.status" /></td>
+                            <td><Datetime :value="beat.time" /></td>
+                            <td>{{ beat.msg }}</td>
+                        </tr>
+
+                        <tr v-if="importantHeartBeatList.length === 0">
+                            <td colspan="4">
+                                No important events
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <div class="d-flex justify-content-center kuma_pagination">
+                    <pagination
+                        v-model="page"
+                        :records="importantHeartBeatList.length"
+                        :per-page="perPage"
+                    />
+                </div>
             </div>
         </div>
-    </div>
-
+    </transition>
     <router-view ref="child" />
 </template>