From be65d13fbe70a7c9db02d911d3bdd6d8fec27776 Mon Sep 17 00:00:00 2001
From: Mark Harris <mark.harris@safelite.com>
Date: Fri, 20 May 2022 09:32:31 -0400
Subject: [PATCH] synced up css with app.vue

---
 src/App.vue                       | 3 ++-
 src/styles/common-animations.scss | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 285c445ac..71b56feaf 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index e247f3ded..c03c267ab 100644
--- a/src/styles/common-animations.scss
+++ b/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,