Creating fade animation

src/App.vue

@@ -7,4 +7,5 @@
   @import "@/styles/common-styles.scss";
   @import "@/styles/common-typography-styles.scss";
   @import "@/styles/common-error-styles.scss";
+  @import "@/styles/common-animations.scss";
 </style>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -87,15 +87,3 @@ export default ({
     }
 })
 </script>
-
-<style lang="scss" scoped>
-    .fade-enter-active,
-    .fade-leave-active {
-        transition: opacity 0.3s ease;
-    }
-
-    .fade-enter-from,
-    .fade-leave-to {
-        opacity: 0;
-    }
-</style>

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -1,13 +1,17 @@
 <template>
     <div class="side-door-options">
-        <buttonQuestion
+        <transition name="fade" mode="out-in">
-            :questionText="questionText"
+            <div class="side-doors" v-if="selectedDamageLocations.includes('SideDoor')" aria-live="polite">
-            isMultiSelect
+                <buttonQuestion
-            :answers="answersToDisplay"
+                    :questionText="questionText"
-            :groupName="groupName"
+                    isMultiSelect
-            buttonType="listCard"
+                    :answers="answersToDisplay"
-            v-model="selectedDoorSidesValues"
+                    :groupName="groupName"
-        />
+                    buttonType="listCard"
+                    v-model="selectedDoorSidesValues"
+                />
+            </div>
+        </transition>
         
         <replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
 
@@ -35,6 +39,7 @@ export default ({
     props: {
         groupName: String,
         modelValue: Array,
+        selectedDamageLocations: Array,
     },
     methods: {
         initializeComponent(cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions){

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -4,11 +4,11 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <sideDoorOptions ref="sideDoorOptions" isAvailable groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" />
         <windshieldOptions ref="windshieldOptions" 
           v-model="selectedWindshieldOptions" 
           :selectedDamageLocations="selectedDamageLocations"
         />
+        <sideDoorOptions ref="sideDoorOptions" groupName="SideDoorSideQuestion" v-model="sideDoorOptionsData" :selectedDamageLocations="selectedDamageLocations" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
-        <div class="windshield-chip-count-question">
+        <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -49,4 +48,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -1,8 +1,7 @@
 <template>
-    <transition name="fade">
+    <transition name="fade" mode="out-in">
-        <div class="windshield-damage-type-question">
+        <div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
             <buttonQuestion
-                v-if="isAvailable"
                 :questionText="questionText"
                 :answers="answersFromCms"
                 :groupName="groupName"
@@ -68,4 +67,4 @@ export default ({
         buttonQuestion,
     }
 })
-</script>
+</script>

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -1,24 +1,22 @@
 <template>
-    <transition name="fade">
+    <div class="windshield-options">
-        <div class="windshield-options" aria-live="polite">
+        <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
-            <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" 
+            :isAvailable=isWindshieldDamageLocation
-                :isAvailable=isWindshieldDamageLocation
+            :suppressError="suppressError"
-                :suppressError="suppressError"
+            groupName="WindshieldDamageTypeQuestion"
-                groupName="WindshieldDamageTypeQuestion"
+            v-model="selectedWindshieldDamageTypeValues" 
-                v-model="selectedWindshieldDamageTypeValues" 
+        />
-            />
+        <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
-            <windshieldChipCountQuestion ref="windshieldChipCountQuestion" 
+            :isAvailable=isRepairOptionSelected
-                :isAvailable=isRepairOptionSelected
+            groupName="WindshieldChipCountQuestion"
-                groupName="WindshieldChipCountQuestion"
+            v-model="selectedWindshieldChipCountValues" 
-                v-model="selectedWindshieldChipCountValues" 
+        />
-            />
+        <replaceOptionsQuestion ref="replaceOptionsQuestion"
-            <replaceOptionsQuestion ref="replaceOptionsQuestion"
+            :isAvailable=isReplaceOptionSelected
-                :isAvailable=isReplaceOptionSelected
+            groupName="WindshieldReplaceOptions"
-                groupName="WindshieldReplaceOptions"
+            v-model="selectedWindshieldReplaceOptionsValues"
-                v-model="selectedWindshieldReplaceOptionsValues"
+        />
-            />
+    </div>
-        </div>
-    </transition>
 </template>
 
 <script>

src/styles/common-animations.scss

@@ -0,0 +1,9 @@
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.3s 2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}