From b18c0f86c2d3fd70249d89e949365cd7a54a00c3 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@2li.ch>
Date: Wed, 28 Jul 2021 21:20:07 +0200
Subject: [PATCH] add animations to the route transitions

---
 src/App.vue                             | 30 ++++++++++-
 src/pages/coaches/CoachDetails.vue      | 54 ++++++++++---------
 src/pages/coaches/CoachesList.vue       | 72 +++++++++++++------------
 src/pages/requests/RequestsRecieved.vue | 56 +++++++++----------
 4 files changed, 123 insertions(+), 89 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a09b9ce..d4747b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,10 @@
 <template>
   <the-header></the-header>
-  <router-view></router-view>
+  <router-view v-slot="slotProps">
+    <transition name="route" mode="out-in">
+      <component :is="slotProps.Component"></component>
+    </transition>
+  </router-view>
 </template>
 
 <script>
@@ -27,4 +31,28 @@ html {
 body {
   margin: 0;
 }
+
+.route-enter-from {
+  opacity: 0;
+  transform: translateY(-30px);
+}
+
+.route-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.route-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.route-leave-active {
+  transition: all 0.3s ease-in;
+}
+
+.route-enter-to,
+.route-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
 </style>
diff --git a/src/pages/coaches/CoachDetails.vue b/src/pages/coaches/CoachDetails.vue
index 1a381e2..4b8f8d8 100644
--- a/src/pages/coaches/CoachDetails.vue
+++ b/src/pages/coaches/CoachDetails.vue
@@ -1,30 +1,32 @@
 <template>
-  <section>
-    <base-card>
-      <h2>{{ fullName }}</h2>
-      <h3>${{ rate }}/hour</h3>
-    </base-card>
-  </section>
-  <section>
-    <base-card>
-      <header>
-        <h2>Interested? Reach out now!</h2>
-        <base-button link :to="coachContactLink">Contact</base-button>
-      </header>
-      <router-view></router-view>
-    </base-card>
-  </section>
-  <section>
-    <base-card>
-      <base-badge
-        v-for="area in areas"
-        :key="area"
-        :type="area"
-        :title="area"
-      ></base-badge>
-      <p>{{ description }}</p>
-    </base-card>
-  </section>
+  <div>
+    <section>
+      <base-card>
+        <h2>{{ fullName }}</h2>
+        <h3>${{ rate }}/hour</h3>
+      </base-card>
+    </section>
+    <section>
+      <base-card>
+        <header>
+          <h2>Interested? Reach out now!</h2>
+          <base-button link :to="coachContactLink">Contact</base-button>
+        </header>
+        <router-view></router-view>
+      </base-card>
+    </section>
+    <section>
+      <base-card>
+        <base-badge
+          v-for="area in areas"
+          :key="area"
+          :type="area"
+          :title="area"
+        ></base-badge>
+        <p>{{ description }}</p>
+      </base-card>
+    </section>
+  </div>
 </template>
 
 <script>
diff --git a/src/pages/coaches/CoachesList.vue b/src/pages/coaches/CoachesList.vue
index c927068..b271df1 100644
--- a/src/pages/coaches/CoachesList.vue
+++ b/src/pages/coaches/CoachesList.vue
@@ -1,41 +1,43 @@
 <template>
-  <base-dialog
-    :show="!!error"
-    title="An error has occured!"
-    @close="handleError"
-  >
-    <p>{{ error }}</p>
-  </base-dialog>
-  <section>
-    <coach-filter @change-filter="setFilter"></coach-filter>
-  </section>
-  <base-card>
+  <div>
+    <base-dialog
+      :show="!!error"
+      title="An error has occured!"
+      @close="handleError"
+    >
+      <p>{{ error }}</p>
+    </base-dialog>
     <section>
-      <div class="controls">
-        <base-button mode="outline" @click="loadCoaches(true)"
-          >Refresh</base-button
-        >
-        <base-button v-if="!isCoach && !isLoading" link to="/register"
-          >Register as Coach</base-button
-        >
-      </div>
-      <div v-if="isLoading">
-        <base-spinner></base-spinner>
-      </div>
-      <ul v-else-if="hasCoaches">
-        <coach-item
-          v-for="coach in filteredCoaches"
-          :key="coach.id"
-          :id="coach.id"
-          :firstName="coach.firstName"
-          :lastName="coach.lastName"
-          :areas="coach.areas"
-          :rate="coach.hourlyRate"
-        ></coach-item>
-      </ul>
-      <h3 v-else>No coaches found.</h3>
+      <coach-filter @change-filter="setFilter"></coach-filter>
     </section>
-  </base-card>
+    <base-card>
+      <section>
+        <div class="controls">
+          <base-button mode="outline" @click="loadCoaches(true)"
+            >Refresh</base-button
+          >
+          <base-button v-if="!isCoach && !isLoading" link to="/register"
+            >Register as Coach</base-button
+          >
+        </div>
+        <div v-if="isLoading">
+          <base-spinner></base-spinner>
+        </div>
+        <ul v-else-if="hasCoaches">
+          <coach-item
+            v-for="coach in filteredCoaches"
+            :key="coach.id"
+            :id="coach.id"
+            :firstName="coach.firstName"
+            :lastName="coach.lastName"
+            :areas="coach.areas"
+            :rate="coach.hourlyRate"
+          ></coach-item>
+        </ul>
+        <h3 v-else>No coaches found.</h3>
+      </section>
+    </base-card>
+  </div>
 </template>
 
 <script>
diff --git a/src/pages/requests/RequestsRecieved.vue b/src/pages/requests/RequestsRecieved.vue
index 389041e..f61d52a 100644
--- a/src/pages/requests/RequestsRecieved.vue
+++ b/src/pages/requests/RequestsRecieved.vue
@@ -1,32 +1,34 @@
 <template>
-  <base-dialog
-    :show="!!error"
-    title="An error has occured!"
-    @close="handleError"
-  >
-    <p>{{ error }}</p>
-  </base-dialog>
+  <div>
+    <base-dialog
+      :show="!!error"
+      title="An error has occured!"
+      @close="handleError"
+    >
+      <p>{{ error }}</p>
+    </base-dialog>
 
-  <section>
-    <base-card>
-      <header>
-        <h2>Requests Received</h2>
-      </header>
-      <div v-if="isLoading">
-        <base-spinner></base-spinner>
-      </div>
-      <ul v-else-if="hasRequests">
-        <request-item
-          v-for="req in recievedRequests"
-          :key="req.id"
-          :email="req.userEmail"
-          :message="req.message"
-        >
-        </request-item>
-      </ul>
-      <h3 v-else>You haven't received any messages</h3>
-    </base-card>
-  </section>
+    <section>
+      <base-card>
+        <header>
+          <h2>Requests Received</h2>
+        </header>
+        <div v-if="isLoading">
+          <base-spinner></base-spinner>
+        </div>
+        <ul v-else-if="hasRequests">
+          <request-item
+            v-for="req in recievedRequests"
+            :key="req.id"
+            :email="req.userEmail"
+            :message="req.message"
+          >
+          </request-item>
+        </ul>
+        <h3 v-else>You haven't received any messages</h3>
+      </base-card>
+    </section>
+  </div>
 </template>
 
 <script>