From 234467f6ec412e4ce082cd47d7e7823a6059717e Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Fri, 4 Mar 2022 09:11:50 -0500
Subject: [PATCH] adding delay feature to animations

---
 .../windshield-damage-type-question.vue              |  4 +++-
 .../windshield-options/windshield-options.vue        |  1 +
 src/styles/common-animations.scss                    | 12 +++++++++---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
index 8031db546..900fcb855 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -1,5 +1,6 @@
 <template>
-    <transition name="fade" mode="out-in">
+    <transition :name="selectedDamageLocations.includes('SideDoor'
+) ? 'fade_delay' : 'fade'" mode="out-in">
         <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
                 :questionText="questionText"
@@ -46,6 +47,7 @@ export default ({
         groupName: String,
         isAvailable: Boolean,
         suppressError: Boolean,
+        selectedDamageLocations: Array
     },
     methods: {
         initializeComponent(cmsContent){
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index ed214158e..866e856c2 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -3,6 +3,7 @@
         <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
             :isAvailable=isWindshieldDamageLocation
             :suppressError="suppressError"
+            :selectedDamageLocations="selectedDamageLocations"
             groupName="WindshieldDamageTypeQuestion"
             v-model="selectedWindshieldDamageTypeValues" 
         />
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
index b697aea38..a516e9fbc 100644
--- a/src/styles/common-animations.scss
+++ b/src/styles/common-animations.scss
@@ -1,12 +1,18 @@
-.fade-enter-active {
+.fade-enter-active, .fade_delay-enter-active {
     transition: opacity 0.6s ease;
 }
 
-.fade-leave-active  {
+.fade_delay-enter-active {
+    transition-delay: 0.175s;
+}
+
+.fade-leave-active, .fade_delay-leave-active  {
     transition: opacity 0.3s ease; 
 }
 
 .fade-enter-from,
-.fade-leave-to {
+.fade-leave-to,
+.fade_delay-enter-from,
+.fade_delay-leave-to {
     opacity: 0;
 }
\ No newline at end of file