adding delay feature to animations

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){

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" 
         />

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;
 }