synced up css with app.vue

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <router-view v-slot="{ Component }">
-    <transition :duration="{ enter: 150, leave: 150 }" name="route-fade" mode="out-in">
+    <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
+      <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
       <component :is="Component" />
     </transition>
   </router-view>

src/styles/common-animations.scss

@@ -12,11 +12,11 @@
 }
 
 .route-fade-enter-active .fade-on-route-transition {
-    transition: opacity 0.8s ease;
+    transition: opacity 0.2s ease-out; //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-leave-active .fade-on-route-transition {
-    transition: opacity 0.3s ease; 
+    transition: opacity 0.2s ease-in;  //This duration should be kept in sync with the app.vue <transition> element attribute
 }
 
 .route-fade-enter-from .fade-on-route-transition,