add animations to the route transitions

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>

src/pages/coaches/CoachDetails.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <section>
       <base-card>
         <h2>{{ fullName }}</h2>
@@ -25,6 +26,7 @@
         <p>{{ description }}</p>
       </base-card>
     </section>
+  </div>
 </template>
 
 <script>

src/pages/coaches/CoachesList.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <base-dialog
       :show="!!error"
       title="An error has occured!"
@@ -36,6 +37,7 @@
         <h3 v-else>No coaches found.</h3>
       </section>
     </base-card>
+  </div>
 </template>
 
 <script>

src/pages/requests/RequestsRecieved.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <base-dialog
       :show="!!error"
       title="An error has occured!"
@@ -27,6 +28,7 @@
         <h3 v-else>You haven't received any messages</h3>
       </base-card>
     </section>
+  </div>
 </template>
 
 <script>